/* ========================================================================== */
/* ENLACE UX v17 — V16 base compatibility — information architecture and structural presentation       */
/* ========================================================================== */

:root {
    --v16-sidebar: 268px;
    --v16-topbar: 68px;
    --v16-page: clamp(22px, 3vw, 46px);
    --v16-soft: #f8f8f6;
    --v16-soft-2: #f3f3f0;
    --v16-ink: #20211f;
    --v16-muted: #70716b;
    --v16-line: #e7e7e2;
    --v16-line-strong: #d9d9d3;
    --v16-accent: #2f6f4e;
    --v16-accent-soft: #edf5f0;
    --v16-shadow: 0 16px 46px rgba(30, 31, 29, .10);
}

html[data-ux-version="17"] .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html[data-ux-version="17"] body.v17-drawer-open {
    overflow: hidden;
}

html[data-ux-version="17"] body {
    background: #fff;
}

html[data-ux-version="17"] .app-shell,
html[data-ux-version="17"] .workspace,
html[data-ux-version="17"] .view-section,
html[data-ux-version="17"] .page-frame {
    min-width: 0;
}

/* Shell and navigation */

@media (min-width: 961px) {
    html[data-ux-version="17"] .sidebar {
        width: var(--v16-sidebar);
    }

    html[data-ux-version="17"] .workspace,
    html[data-ux-version="17"] body[data-sidebar="compact"] .workspace {
        width: calc(100% - var(--v16-sidebar));
        margin-left: var(--v16-sidebar);
    }
}

html[data-ux-version="17"] .sidebar {
    padding: 10px 9px 12px;
    gap: 6px;
    background: #f7f7f5;
    border-right: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .workspace-selector {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 6px 7px;
}

html[data-ux-version="17"] .workspace-brand-mark {
    width: 30px !important;
    height: 30px !important;
    display: grid;
    place-items: center;
    border-radius: 8px !important;
    font-size: 13px;
}

html[data-ux-version="17"] .workspace-selector-copy {
    min-width: 0;
    display: grid;
    line-height: 1.25;
}

html[data-ux-version="17"] .workspace-selector-copy span,
html[data-ux-version="17"] .workspace-selector-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .workspace-selector-copy span {
    font-size: 13px;
    font-weight: 650;
}

html[data-ux-version="17"] .workspace-selector-copy small {
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] .workspace-settings-link {
    color: var(--v16-muted);
}

html[data-ux-version="17"] .sidebar-command-zone {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 4px 0 8px;
}

html[data-ux-version="17"] .sidebar-command-zone button {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
}

html[data-ux-version="17"] .sidebar-command-zone button svg {
    width: 16px;
    height: 16px;
}

html[data-ux-version="17"] .sidebar-command-zone button kbd {
    color: #8a8b84;
    background: transparent;
    border: 0;
    font-size: 9px;
}

html[data-ux-version="17"] .sidebar-create-button {
    color: #fff;
    background: var(--v16-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

html[data-ux-version="17"] .sidebar-create-button:hover {
    background: #0f100f;
}

html[data-ux-version="17"] .sidebar-create-button kbd {
    color: rgba(255, 255, 255, .58) !important;
}

html[data-ux-version="17"] .sidebar-search-button {
    color: #5f605b;
    background: #fff;
    border-color: var(--v16-line) !important;
}

html[data-ux-version="17"] .sidebar-search-button:hover {
    color: var(--v16-ink);
    border-color: var(--v16-line-strong) !important;
}

html[data-ux-version="17"] .sidebar-nav {
    gap: 1px;
}

html[data-ux-version="17"] .sidebar-group-label {
    min-height: 23px;
    margin: 10px 8px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #989991;
    font-size: 9px;
    letter-spacing: .095em;
}

html[data-ux-version="17"] .sidebar-group-label button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #777871;
    background: transparent;
}

html[data-ux-version="17"] .sidebar-group-label button:hover {
    background: #ecece8;
}

html[data-ux-version="17"] .sidebar-group-label button svg {
    width: 14px;
    height: 14px;
}

html[data-ux-version="17"] .nav-item {
    min-height: 36px;
    padding: 6px 9px;
    border-radius: 7px;
    color: #5e5f59;
    font-size: 12.5px;
}

html[data-ux-version="17"] .nav-item.active {
    color: #20211f;
    background: #eaeae6;
}

html[data-ux-version="17"] .workspace-tree {
    margin: 0;
    padding: 0;
    border: 0;
}

html[data-ux-version="17"] .v16-space-tree {
    display: grid;
    gap: 1px;
}

html[data-ux-version="17"] .v16-space-node {
    min-width: 0;
}

html[data-ux-version="17"] .v16-space-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    border-radius: 7px;
}

html[data-ux-version="17"] .v16-space-row:hover,
html[data-ux-version="17"] .v16-space-node.active > .v16-space-row {
    background: #ecece8;
}

html[data-ux-version="17"] .v16-space-main {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 1px 4px 7px;
    border: 0;
    color: #5e5f59;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

html[data-ux-version="17"] .v16-space-main > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

html[data-ux-version="17"] .v16-space-main > strong {
    color: #a0a19a;
    font-size: 9px;
}

html[data-ux-version="17"] .tree-space-mark {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #5d625e;
    background: #fff;
    border: 1px solid #e4e4df;
    font-size: 9px;
    font-weight: 700;
}

html[data-ux-version="17"] .tree-space-mark svg {
    width: 11px;
    height: 11px;
}

html[data-ux-version="17"] .v16-space-toggle {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #a0a19a;
    background: transparent;
    opacity: 0;
}

html[data-ux-version="17"] .v16-space-row:hover .v16-space-toggle,
html[data-ux-version="17"] .v16-space-node:focus-within .v16-space-toggle {
    opacity: 1;
}

html[data-ux-version="17"] .v16-space-toggle svg {
    width: 13px;
    height: 13px;
}

html[data-ux-version="17"] .v16-space-children {
    display: grid;
    gap: 1px;
    margin: 1px 0 4px 29px;
    padding-left: 7px;
    border-left: 1px solid #deded8;
}

html[data-ux-version="17"] .v16-space-children button {
    min-width: 0;
    min-height: 29px;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    color: #70716b;
    background: transparent;
    text-align: left;
    font-size: 11px;
}

html[data-ux-version="17"] .v16-space-children button:hover {
    color: #292a27;
    background: #ededE9;
}

html[data-ux-version="17"] .v16-space-children button svg {
    width: 13px;
    height: 13px;
}

html[data-ux-version="17"] .v16-space-children button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .v16-space-children button strong {
    color: #a0a19a;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-empty-space {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px dashed #d5d5cf;
    border-radius: 8px;
    color: #696a64;
    background: transparent;
    text-align: left;
}

html[data-ux-version="17"] .v16-empty-space span,
html[data-ux-version="17"] .v16-empty-space strong,
html[data-ux-version="17"] .v16-empty-space small {
    display: block;
}

html[data-ux-version="17"] .v16-empty-space small {
    color: #989991;
    font-size: 9px;
}

html[data-ux-version="17"] .sidebar-section {
    margin-top: auto;
}

html[data-ux-version="17"] .v16-topbar {
    min-height: var(--v16-topbar);
    display: grid;
    grid-template-columns: minmax(200px, .75fr) minmax(280px, 540px) minmax(170px, .55fr);
    align-items: center;
    gap: 20px;
    padding: 9px var(--v16-page);
}

html[data-ux-version="17"] .topbar-context {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] .topbar-title-line {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

html[data-ux-version="17"] .topbar-title-line #page-title {
    flex: 0 0 auto;
    margin: 0;
    font-size: 16px !important;
}

html[data-ux-version="17"] .topbar-title-line #page-kicker {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

html[data-ux-version="17"] .breadcrumbs {
    min-height: 14px;
    font-size: 9px;
}

html[data-ux-version="17"] .topbar-search {
    min-width: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
    color: #8a8b84;
    background: #fafaf8;
    text-align: left;
    font-size: 11px;
}

html[data-ux-version="17"] .topbar-search:hover {
    color: #5d5e58;
    border-color: var(--v16-line-strong);
    background: #fff;
}

html[data-ux-version="17"] .topbar-search svg {
    width: 15px;
    height: 15px;
}

html[data-ux-version="17"] .topbar-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .topbar-search kbd {
    padding: 1px 5px;
    border: 1px solid #e2e2dc;
    border-radius: 5px;
    color: #8c8d86;
    background: #fff;
    font-size: 9px;
}

html[data-ux-version="17"] .top-actions {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

html[data-ux-version="17"] .topbar-assistant-button {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--v16-line);
    border-radius: 8px;
    color: #4f554f;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
}

html[data-ux-version="17"] .topbar-assistant-button svg {
    width: 15px;
    height: 15px;
    color: var(--v16-accent);
}

html[data-ux-version="17"] .topbar-profile {
    text-decoration: none;
}

html[data-ux-version="17"] .topbar-profile .avatar {
    width: 34px;
    height: 34px;
    border: 1px solid var(--v16-line);
    background: #f2f4f1;
}

html[data-ux-version="17"] .page-frame {
    width: min(1500px, 100%);
    padding: 26px var(--v16-page) 72px;
}

html[data-ux-version="17"] .view-section > .page-title-row,
html[data-ux-version="17"] #projects-list-container > .page-title-row {
    min-height: 40px;
    justify-content: flex-end;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

html[data-ux-version="17"] .view-section > .page-title-row > :first-child,
html[data-ux-version="17"] #projects-list-container > .page-title-row > :first-child {
    display: none;
}

/* Dashboard */

html[data-ux-version="17"] .dashboard-welcome-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

html[data-ux-version="17"] .dashboard-welcome-row h2 {
    margin: 1px 0 3px;
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1.12;
}

html[data-ux-version="17"] .dashboard-welcome-row p {
    margin: 0;
}

html[data-ux-version="17"] #dashboard-date-label::first-letter {
    text-transform: uppercase;
}

html[data-ux-version="17"] .dashboard-capture {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, .8fr) minmax(360px, 1.5fr);
    align-items: center;
    gap: 11px 24px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #dfe5e0;
    border-radius: 13px;
    background: linear-gradient(135deg, #fbfdfb 0%, #f5f8f5 100%);
}

html[data-ux-version="17"] .capture-leading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

html[data-ux-version="17"] .capture-leading > div {
    min-width: 0;
}

html[data-ux-version="17"] .capture-leading strong,
html[data-ux-version="17"] .capture-leading small {
    display: block;
}

html[data-ux-version="17"] .capture-leading strong {
    font-size: 13px;
}

html[data-ux-version="17"] .capture-leading small {
    margin-top: 2px;
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] .capture-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d9e5dd;
    border-radius: 10px;
    color: var(--v16-accent);
    background: #fff;
}

html[data-ux-version="17"] .capture-avatar svg {
    width: 17px;
    height: 17px;
}

html[data-ux-version="17"] .dashboard-capture-input {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px;
    gap: 3px;
    padding: 4px;
    border: 1px solid #daddd9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(25, 25, 25, .03);
}

html[data-ux-version="17"] .dashboard-capture-input .field {
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-ux-version="17"] .dashboard-capture-input .icon-btn {
    width: 34px;
    min-height: 34px;
    height: 34px;
    border: 0;
}

html[data-ux-version="17"] .capture-shortcuts {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

html[data-ux-version="17"] .capture-shortcuts button {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    color: #777872;
    background: transparent;
    font-size: 10px;
}

html[data-ux-version="17"] .capture-shortcuts button:hover {
    color: #343532;
    background: rgba(255, 255, 255, .9);
}

html[data-ux-version="17"] .capture-shortcuts svg {
    width: 13px;
    height: 13px;
}

html[data-ux-version="17"] .capture-chat-history {
    display: none;
    grid-column: 1 / -1;
    max-height: 94px;
    min-height: 0;
    padding: 0;
    overflow: auto;
    border: 0;
    background: transparent;
}

html[data-ux-version="17"] .capture-chat-history.has-history {
    display: block;
}

html[data-ux-version="17"] .capture-chat-history .chat-message:not(:last-child) {
    display: none;
}

html[data-ux-version="17"] .capture-chat-history .chat-message:last-child {
    max-width: 100%;
    margin: 4px 0 0;
    padding: 8px 10px;
    border: 1px solid #e2e7e3;
    border-radius: 8px;
    color: #535752;
    background: #fff;
    font-size: 11px;
}

html[data-ux-version="17"] .dashboard-mobile-actions {
    display: none;
}

html[data-ux-version="17"] .alerts-banner-container:not(:empty) {
    margin-bottom: 14px;
}

html[data-ux-version="17"] .dashboard-workbench {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(290px, .72fr);
    align-items: start;
    gap: 18px;
}

html[data-ux-version="17"] .dashboard-main-column,
html[data-ux-version="17"] .dashboard-context-column {
    min-width: 0;
    display: grid;
    gap: 14px;
}

html[data-ux-version="17"] .v16-focus {
    display: block;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--v16-line);
    border-radius: 12px;
    background: #fff;
}

html[data-ux-version="17"] .v16-focus > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

html[data-ux-version="17"] .v16-focus > header h3,
html[data-ux-version="17"] .v16-focus > header p,
html[data-ux-version="17"] .v16-focus > header .eyebrow {
    margin: 0;
}

html[data-ux-version="17"] .v16-focus > header h3 {
    margin-top: 1px;
    font-size: 18px;
}

html[data-ux-version="17"] .v16-focus > header p {
    margin-top: 3px;
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] .v16-focus-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
}

html[data-ux-version="17"] .v16-focus-group {
    min-width: 0;
    padding: 10px;
    border-right: 1px solid var(--v16-line);
    background: #fff;
}

html[data-ux-version="17"] .v16-focus-group:last-child {
    border-right: 0;
}

html[data-ux-version="17"] .v16-focus-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin-bottom: 4px;
    padding: 0 3px;
    color: #74756e;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

html[data-ux-version="17"] .v16-focus-group > header strong {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #85867f;
    background: #f1f1ee;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-focus-group.danger > header strong {
    color: #a63a34;
    background: #fff0ef;
}

html[data-ux-version="17"] .v16-focus-task {
    min-width: 0;
    min-height: 56px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 25px 14px;
    align-items: center;
    gap: 7px;
    padding: 7px 3px;
    border-top: 1px solid #efefeb;
}

html[data-ux-version="17"] .v16-focus-task:first-child {
    border-top: 0;
}

html[data-ux-version="17"] .v16-focus-task > svg {
    width: 13px;
    color: #aaaBa4;
}

html[data-ux-version="17"] .v16-focus-task-main {
    min-width: 0;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}

html[data-ux-version="17"] .v16-focus-task-main strong,
html[data-ux-version="17"] .v16-focus-task-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .v16-focus-task-main strong {
    font-size: 11px;
    font-weight: 600;
}

html[data-ux-version="17"] .v16-focus-task-main small {
    margin-top: 2px;
    color: #85867f;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-focus-empty {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 4px;
    border: 0;
    color: #989991;
    background: transparent;
    text-align: left;
    font-size: 10px;
}

html[data-ux-version="17"] .v16-focus-empty svg {
    width: 15px;
    color: #7e9a87;
}

html[data-ux-version="17"] .dashboard-all-work {
    padding: 14px;
}

html[data-ux-version="17"] .dashboard-all-work .panel-heading {
    margin-bottom: 8px;
}

html[data-ux-version="17"] .dashboard-all-work #dashboard-tasks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

html[data-ux-version="17"] .dashboard-all-work .v16-task-card {
    min-height: 118px;
}

html[data-ux-version="17"] .dashboard-summary-card {
    padding: 15px;
    border: 1px solid #dfe6e1;
    border-radius: 12px;
    background: #f8faf8;
}

html[data-ux-version="17"] .dashboard-summary-card > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

html[data-ux-version="17"] .dashboard-summary-card h3,
html[data-ux-version="17"] .dashboard-summary-card p {
    margin: 0;
}

html[data-ux-version="17"] .summary-live-dot {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #7d837e;
    font-size: 8px;
}

html[data-ux-version="17"] .summary-live-dot::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3a8c61;
    content: "";
}

html[data-ux-version="17"] .dashboard-compact-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

html[data-ux-version="17"] .dashboard-compact-metrics a {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1px 7px;
    padding: 9px;
    border: 1px solid #e4e9e5;
    border-radius: 8px;
    color: inherit;
    background: #fff;
    text-decoration: none;
}

html[data-ux-version="17"] .dashboard-compact-metrics span {
    overflow: hidden;
    color: #757973;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .dashboard-compact-metrics strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 20px;
    line-height: 1;
}

html[data-ux-version="17"] .dashboard-compact-metrics small {
    color: #a0a39d;
    font-size: 8px;
}

html[data-ux-version="17"] .dashboard-spaces-panel,
html[data-ux-version="17"] .dashboard-context-column .activity-panel {
    padding: 14px;
}

html[data-ux-version="17"] .dashboard-spaces-list {
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] .dashboard-spaces-list > button {
    min-width: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 3px;
    border: 0;
    border-top: 1px solid #efefeb;
    color: inherit;
    background: transparent;
    text-align: left;
}

html[data-ux-version="17"] .dashboard-spaces-list > button:first-child {
    border-top: 0;
}

html[data-ux-version="17"] .dashboard-spaces-list > button > span:nth-child(2),
html[data-ux-version="17"] .dashboard-spaces-list strong,
html[data-ux-version="17"] .dashboard-spaces-list small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .dashboard-spaces-list strong {
    font-size: 10px;
}

html[data-ux-version="17"] .dashboard-spaces-list small {
    color: #85867f;
    font-size: 8px;
}

html[data-ux-version="17"] .dashboard-spaces-list i:not(.project-portfolio-icon) {
    display: block;
    height: 3px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: #ecece8;
}

html[data-ux-version="17"] .dashboard-spaces-list i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #7ea68d;
}

html[data-ux-version="17"] .dashboard-spaces-list em {
    color: #777b76;
    font-size: 9px;
    font-style: normal;
}

html[data-ux-version="17"] .dashboard-context-column .activity-list {
    max-height: 260px;
    overflow: auto;
}

/* Portfolio */

html[data-ux-version="17"] .projects-portfolio-toolbar {
    min-height: 50px;
    display: grid;
    grid-template-columns: minmax(240px, 420px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .portfolio-search,
html[data-ux-version="17"] .task-search-box {
    min-width: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid var(--v16-line);
    border-radius: 8px;
    background: #fff;
}

html[data-ux-version="17"] .portfolio-search svg,
html[data-ux-version="17"] .task-search-box svg {
    width: 15px;
    color: #92938c;
}

html[data-ux-version="17"] .portfolio-search input,
html[data-ux-version="17"] .task-search-box input {
    min-width: 0;
    height: 26px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 11px;
}

html[data-ux-version="17"] #project-count {
    justify-self: start;
}

html[data-ux-version="17"] .project-portfolio-toggle {
    justify-self: end;
}

html[data-ux-version="17"] .v16-projects-list {
    display: block;
    overflow: visible;
    border: 1px solid var(--v16-line);
    border-radius: 11px;
    background: #fff;
}

html[data-ux-version="17"] .project-portfolio-head,
html[data-ux-version="17"] .project-portfolio-row {
    min-width: 900px;
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) 120px minmax(150px, .7fr) minmax(170px, .85fr) 110px 34px;
    align-items: center;
    gap: 12px;
}

html[data-ux-version="17"] .project-portfolio-head {
    min-height: 38px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--v16-line);
    color: #878881;
    background: #f9f9f7;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html[data-ux-version="17"] .project-portfolio-row {
    position: relative;
    min-height: 78px;
    padding: 9px 12px;
    border-bottom: 1px solid #ecece8;
}

html[data-ux-version="17"] .project-portfolio-row:last-child {
    border-bottom: 0;
}

html[data-ux-version="17"] .project-portfolio-row:hover {
    background: #fafaf8;
}

html[data-ux-version="17"] .project-portfolio-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
}

html[data-ux-version="17"] .project-portfolio-icon {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #dfe4df;
    border-radius: 9px;
    color: #4d6254;
    background: #f3f7f4;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
}

html[data-ux-version="17"] .project-portfolio-main > span:last-child,
html[data-ux-version="17"] .project-portfolio-main strong,
html[data-ux-version="17"] .project-portfolio-main small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .project-portfolio-main strong {
    font-size: 12px;
    font-weight: 650;
}

html[data-ux-version="17"] .project-portfolio-main small {
    margin-top: 3px;
    color: #7d7e77;
    font-size: 9px;
}

html[data-ux-version="17"] .project-portfolio-progress {
    min-width: 0;
    display: grid;
    gap: 6px;
}

html[data-ux-version="17"] .project-portfolio-progress > span {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
}

html[data-ux-version="17"] .project-portfolio-progress strong {
    font-size: 11px;
}

html[data-ux-version="17"] .project-portfolio-progress small {
    overflow: hidden;
    color: #8b8c85;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .project-portfolio-progress > i {
    height: 4px;
    display: block;
    overflow: hidden;
    border-radius: 99px;
    background: #ecece8;
}

html[data-ux-version="17"] .project-portfolio-progress > i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #5e9472;
}

html[data-ux-version="17"] .project-portfolio-next {
    min-width: 0;
}

html[data-ux-version="17"] .project-portfolio-next strong,
html[data-ux-version="17"] .project-portfolio-next small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .project-portfolio-next strong {
    font-size: 10px;
}

html[data-ux-version="17"] .project-portfolio-next small {
    margin-top: 3px;
    color: #898a83;
    font-size: 8px;
}

html[data-ux-version="17"] .project-portfolio-next.overdue strong,
html[data-ux-version="17"] .project-portfolio-next.overdue small {
    color: #a43e37;
}

html[data-ux-version="17"] .project-portfolio-people {
    display: flex;
    align-items: center;
    padding-left: 8px;
}

html[data-ux-version="17"] .project-portfolio-people i {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-left: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #55625a;
    background: #eef2ef;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
}

html[data-ux-version="17"] .project-portfolio-menu {
    position: relative;
    justify-self: end;
}

html[data-ux-version="17"] .v16-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

html[data-ux-version="17"] .project-portfolio-card {
    min-width: 0;
    min-height: 210px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--v16-line);
    border-radius: 11px;
    background: #fff;
}

html[data-ux-version="17"] .project-portfolio-card:hover {
    border-color: var(--v16-line-strong);
    box-shadow: 0 8px 24px rgba(30, 31, 29, .05);
}

html[data-ux-version="17"] .project-portfolio-card > header,
html[data-ux-version="17"] .project-portfolio-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html[data-ux-version="17"] .project-portfolio-card-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
}

html[data-ux-version="17"] .project-portfolio-card-main .workflow-state-pill {
    justify-self: start;
}

html[data-ux-version="17"] .project-portfolio-card-main > strong {
    margin-top: 4px;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .project-portfolio-card-main > small {
    display: -webkit-box;
    overflow: hidden;
    color: #7e7f78;
    font-size: 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html[data-ux-version="17"] .project-portfolio-card > footer {
    padding-top: 10px;
    border-top: 1px solid #eeeeea;
    color: #85867f;
    font-size: 9px;
}

html[data-ux-version="17"] .project-portfolio-card > footer span {
    display: flex;
    align-items: center;
    gap: 4px;
}

html[data-ux-version="17"] .project-portfolio-card > footer svg {
    width: 12px;
    height: 12px;
}

/* Project space */

html[data-ux-version="17"] .v16-project-detail .project-detail-grid[hidden],
html[data-ux-version="17"] .v16-project-detail .space-resources[hidden] {
    display: none !important;
}

html[data-ux-version="17"] .v16-project-detail .project-detail-back-btn {
    min-height: 30px;
    margin: 0 0 8px;
    padding: 3px 0;
    border: 0;
    background: transparent;
    font-size: 10px;
}

html[data-ux-version="17"] .v16-project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    padding: 7px 0 16px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v16-project-hero .project-detail-header {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(170px, auto);
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 0;
    border: 0;
}

html[data-ux-version="17"] .v16-project-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #dce4de;
    border-radius: 12px;
    color: #3f654d;
    background: #f1f6f2;
    font-size: 18px;
    font-weight: 700;
}

html[data-ux-version="17"] .v16-project-hero .project-detail-header-left h2 {
    font-size: clamp(22px, 2vw, 29px) !important;
}

html[data-ux-version="17"] .v16-project-hero .project-detail-header-left p {
    max-width: 720px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .v16-project-hero .project-workflow-control {
    min-width: 160px !important;
    max-width: 190px;
}

html[data-ux-version="17"] .v16-project-hero .project-workflow-control label,
html[data-ux-version="17"] .v16-project-hero .project-workflow-control .text-link {
    display: none;
}

html[data-ux-version="17"] .v16-project-hero .project-workflow-control select {
    min-height: 34px;
    padding: 5px 9px;
}

html[data-ux-version="17"] .v16-project-hero .project-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

html[data-ux-version="17"] .v16-project-hero .project-toolbar-primary,
html[data-ux-version="17"] .v16-project-hero .project-toolbar-secondary {
    gap: 6px;
}

html[data-ux-version="17"] .v16-project-hero .project-open-all,
html[data-ux-version="17"] .v16-project-hero .project-public-content-btn,
html[data-ux-version="17"] .v16-project-hero .print-action {
    display: none;
}

html[data-ux-version="17"] .v16-project-context-line {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    color: #7d7e77;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-project-context-line > span,
html[data-ux-version="17"] .v16-project-context-line > button {
    display: flex;
    align-items: center;
    gap: 5px;
}

html[data-ux-version="17"] .v16-project-context-line svg {
    width: 12px;
    height: 12px;
}

html[data-ux-version="17"] .v16-project-context-line button {
    margin-left: auto;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    color: #55705e;
    background: #f2f6f3;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-project-detail .project-view-tabs {
    min-height: 43px;
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin: 0 0 16px;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v16-project-detail .project-view-tabs > button,
html[data-ux-version="17"] .project-secondary-views > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #777872;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

html[data-ux-version="17"] .v16-project-detail .project-view-tabs > button.active,
html[data-ux-version="17"] .project-secondary-views.active > summary {
    color: #20211f;
    border-bottom-color: #30312e;
    background: transparent;
}

html[data-ux-version="17"] .v16-project-detail .project-view-tabs svg {
    width: 14px;
    height: 14px;
}

html[data-ux-version="17"] .project-secondary-views {
    position: relative;
}

html[data-ux-version="17"] .project-secondary-views > summary {
    list-style: none;
}

html[data-ux-version="17"] .project-secondary-views > summary::-webkit-details-marker {
    display: none;
}

html[data-ux-version="17"] .project-secondary-views > summary svg:last-child {
    width: 11px;
}

html[data-ux-version="17"] .project-secondary-views > div {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 40;
    width: 190px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--v16-shadow);
}

html[data-ux-version="17"] .project-secondary-views > div button {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    color: #60615b;
    background: transparent;
    text-align: left;
    font-size: 10px;
}

html[data-ux-version="17"] .project-secondary-views > div button:hover {
    color: #222320;
    background: #f3f3f0;
}

html[data-ux-version="17"] .v16-project-overview {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .72fr);
    align-items: start;
    gap: 16px;
}

html[data-ux-version="17"] .v16-project-overview > .project-summary-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
}

html[data-ux-version="17"] .v16-project-overview > .project-summary-strip > article {
    min-height: 78px;
    padding: 11px 14px;
    border: 0;
    border-right: 1px solid var(--v16-line);
    border-radius: 0;
    background: #fff;
}

html[data-ux-version="17"] .v16-project-overview > .project-summary-strip > article:last-child {
    border-right: 0;
}

html[data-ux-version="17"] .v16-project-overview > .project-summary-strip strong {
    font-size: 18px;
}

html[data-ux-version="17"] .v16-project-overview-main,
html[data-ux-version="17"] .v16-project-overview-aside {
    min-width: 0;
    display: grid;
    gap: 14px;
}

html[data-ux-version="17"] .v16-project-overview .project-detail-column,
html[data-ux-version="17"] .v16-project-overview .space-resources,
html[data-ux-version="17"] .v16-project-health,
html[data-ux-version="17"] .v16-secondary-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fff;
}

html[data-ux-version="17"] .v16-project-overview .project-detail-column {
    box-shadow: none;
}

html[data-ux-version="17"] .v16-project-overview-main .project-detail-column .task-list {
    max-height: none !important;
}

html[data-ux-version="17"] .v16-project-overview-main .project-detail-column .task-item {
    min-height: 54px;
    margin: 0;
    border: 0;
    border-top: 1px solid #ededE9;
    border-radius: 0;
}

html[data-ux-version="17"] .v16-project-overview-main .project-detail-column .task-item:first-child {
    border-top: 0;
}

html[data-ux-version="17"] .v16-project-health > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

html[data-ux-version="17"] .v16-project-health h3,
html[data-ux-version="17"] .v16-project-health p {
    margin: 0;
}

html[data-ux-version="17"] .v16-project-health > header > span {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
}

html[data-ux-version="17"] .v16-project-health > header > span.success {
    color: #25734c;
    background: #edf7f1;
}

html[data-ux-version="17"] .v16-project-health > header > span.warning {
    color: #a3443d;
    background: #fff0ef;
}

html[data-ux-version="17"] .v16-health-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

html[data-ux-version="17"] .v16-health-progress > strong {
    font-size: 29px;
    letter-spacing: -.05em;
}

html[data-ux-version="17"] .v16-health-progress > span {
    min-width: 0;
    display: grid;
    gap: 5px;
}

html[data-ux-version="17"] .v16-health-progress i {
    height: 5px;
    display: block;
    overflow: hidden;
    border-radius: 99px;
    background: #e9e9e5;
}

html[data-ux-version="17"] .v16-health-progress i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #57906b;
}

html[data-ux-version="17"] .v16-health-progress small {
    color: #85867f;
    font-size: 8px;
}

html[data-ux-version="17"] .v16-project-health dl {
    margin: 0;
    display: grid;
    gap: 8px;
}

html[data-ux-version="17"] .v16-project-health dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #eeeeea;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-project-health dt {
    color: #85867f;
}

html[data-ux-version="17"] .v16-project-health dd {
    max-width: 60%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

html[data-ux-version="17"] .v16-project-overview-aside .project-detail-column:nth-of-type(1) .photos-gallery,
html[data-ux-version="17"] .v16-project-overview-aside .project-detail-column:nth-of-type(1) > div[style*="Evidencias"] {
    display: none !important;
}

html[data-ux-version="17"] .v16-secondary-panel {
    padding: 0;
}

html[data-ux-version="17"] .v16-secondary-panel > summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    list-style: none;
    color: #62635d;
    font-size: 10px;
    font-weight: 600;
}

html[data-ux-version="17"] .v16-secondary-panel > summary span {
    display: flex;
    align-items: center;
    gap: 7px;
}

html[data-ux-version="17"] .v16-secondary-panel > summary svg {
    width: 14px;
}

html[data-ux-version="17"] .v16-secondary-panel > .project-detail-column {
    border: 0;
    border-top: 1px solid var(--v16-line);
    border-radius: 0;
}

html[data-ux-version="17"] .v16-project-view-content {
    min-width: 0;
}

html[data-ux-version="17"] .v16-project-view-content .project-custom-view {
    min-width: 0;
}

/* Tasks and views */

html[data-ux-version="17"] .task-view-strip {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .task-primary-views {
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    border: 0;
    background: transparent;
}

html[data-ux-version="17"] .task-primary-views .view-toggle-btn {
    min-height: 43px;
    gap: 6px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #797a73;
    background: transparent;
    font-size: 10px;
}

html[data-ux-version="17"] .task-primary-views .view-toggle-btn.active {
    color: #20211f;
    border-bottom-color: #2f302d;
    background: transparent;
}

html[data-ux-version="17"] .task-primary-views .view-toggle-btn svg {
    width: 14px;
    height: 14px;
}

html[data-ux-version="17"] .task-control-bar {
    position: relative;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 5px 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

html[data-ux-version="17"] .task-control-bar .plane-toolbar-left,
html[data-ux-version="17"] .task-control-bar .plane-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

html[data-ux-version="17"] .task-search-box {
    width: min(360px, 40vw);
}

html[data-ux-version="17"] .task-search-box .filter-control {
    width: 100%;
    min-height: 26px;
    border: 0;
}

html[data-ux-version="17"] .task-filter-disclosure,
html[data-ux-version="17"] .task-options-disclosure {
    position: relative;
}

html[data-ux-version="17"] .task-filter-disclosure > summary,
html[data-ux-version="17"] .task-options-disclosure > summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--v16-line);
    border-radius: 8px;
    color: #666761;
    background: #fff;
    list-style: none;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

html[data-ux-version="17"] .task-filter-disclosure > summary::-webkit-details-marker,
html[data-ux-version="17"] .task-options-disclosure > summary::-webkit-details-marker {
    display: none;
}

html[data-ux-version="17"] .task-filter-disclosure > summary svg,
html[data-ux-version="17"] .task-options-disclosure > summary svg {
    width: 14px;
    height: 14px;
}

html[data-ux-version="17"] #task-filter-badge {
    min-width: 17px;
    height: 17px;
    display: none;
    place-items: center;
    border-radius: 99px;
    color: #fff;
    background: var(--v16-accent);
    font-size: 8px;
}

html[data-ux-version="17"] #task-filter-badge.active {
    display: grid;
}

html[data-ux-version="17"] .task-filter-popover,
html[data-ux-version="17"] .task-options-popover {
    position: absolute;
    top: calc(100% + 7px);
    z-index: 45;
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--v16-shadow);
}

html[data-ux-version="17"] .task-filter-popover {
    left: 0;
    width: min(420px, calc(100vw - 28px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-ux-version="17"] .task-options-popover {
    right: 0;
    width: min(270px, calc(100vw - 28px));
}

html[data-ux-version="17"] .task-filter-popover label,
html[data-ux-version="17"] .task-option-field {
    min-width: 0;
    display: grid;
    gap: 4px;
}

html[data-ux-version="17"] .task-filter-popover label > span,
html[data-ux-version="17"] .task-option-field > span {
    color: #85867f;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

html[data-ux-version="17"] .task-filter-popover .filter-control,
html[data-ux-version="17"] .task-options-popover .filter-control {
    width: 100%;
    min-height: 36px;
    padding: 5px 8px;
}

html[data-ux-version="17"] .task-filter-popover .task-clear-filters {
    grid-column: 1 / -1;
    justify-self: start;
}

html[data-ux-version="17"] .task-options-popover > button,
html[data-ux-version="17"] .task-options-popover .plane-dropdown > button {
    width: 100%;
    justify-content: flex-start;
}

html[data-ux-version="17"] .task-options-popover .display-properties-control {
    position: relative;
}

html[data-ux-version="17"] .task-options-popover .plane-dropdown-menu {
    top: 100%;
    right: 0;
    left: auto;
}

html[data-ux-version="17"] .kanban-board {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: start;
    gap: 10px;
}

html[data-ux-version="17"] .kanban-column {
    min-height: 420px;
    padding: 7px;
    border: 1px solid #e8e8e3;
    border-radius: 10px;
    background: #f7f7f5;
}

html[data-ux-version="17"] .kanban-column-header {
    min-height: 38px;
    padding: 4px 4px 8px;
}

html[data-ux-version="17"] .kanban-column-header h3 {
    color: #62635d;
    font-size: 10px;
    font-weight: 700;
}

html[data-ux-version="17"] .kanban-column-header h3::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-color, #92938c);
    content: "";
}

html[data-ux-version="17"] .kanban-column .task-list {
    display: grid;
    gap: 7px;
}

html[data-ux-version="17"] .v16-task-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 10px;
    border: 1px solid #e3e3de;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(20, 21, 19, .025);
}

html[data-ux-version="17"] .v16-task-card:hover {
    border-color: #d4d4ce;
    box-shadow: 0 5px 16px rgba(25, 25, 25, .055);
}

html[data-ux-version="17"] .v16-task-card-head {
    min-width: 0;
    display: grid;
    grid-template-columns: 13px 18px 22px minmax(0, 1fr) 26px;
    align-items: start;
    gap: 5px;
}

html[data-ux-version="17"] .v16-task-card .task-drag-handle {
    align-self: center;
    color: #b3b4ad;
    opacity: 0;
}

html[data-ux-version="17"] .v16-task-card .task-drag-handle svg {
    width: 12px;
}

html[data-ux-version="17"] .v16-task-card .task-select-checkbox {
    align-self: center;
    opacity: 0;
}

html[data-ux-version="17"] .v16-task-card:hover .task-drag-handle,
html[data-ux-version="17"] .v16-task-card:hover .task-select-checkbox,
html[data-ux-version="17"] .v16-task-card:focus-within .task-drag-handle,
html[data-ux-version="17"] .v16-task-card:focus-within .task-select-checkbox,
html[data-ux-version="17"] .v16-task-card .task-select-checkbox:checked {
    opacity: 1;
}

html[data-ux-version="17"] .v16-task-title {
    min-width: 0;
    display: -webkit-box;
    padding: 1px 0;
    overflow: hidden;
    border: 0;
    color: #2b2c29;
    background: transparent;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html[data-ux-version="17"] .v16-task-context {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 0 58px;
    border: 0;
    color: #81827b;
    background: transparent;
    text-align: left;
    font-size: 8px;
}

html[data-ux-version="17"] .v16-task-context span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .v16-task-context svg {
    width: 11px;
    height: 11px;
}

html[data-ux-version="17"] .v16-task-context .task-due.overdue {
    color: #aa413a;
}

html[data-ux-version="17"] .v16-task-card-footer {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 3px 0 0 58px;
    border-top: 1px solid #f0f0ec;
}

html[data-ux-version="17"] .v16-task-card-footer .ux-assignee-avatar {
    width: 22px;
    height: 22px;
    font-size: 7px;
}

html[data-ux-version="17"] .ux-assignee-avatar.empty {
    color: #a7a8a1;
    background: #fafaf8;
}

html[data-ux-version="17"] .v16-task-card-footer .priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    font-size: 7px;
}

html[data-ux-version="17"] .v16-task-card-footer .priority-badge svg {
    width: 9px;
    height: 9px;
}

html[data-ux-version="17"] .v16-task-card-footer .custom-tag {
    max-width: 90px;
    font-size: 7px;
}

html[data-ux-version="17"] .v16-task-spacer {
    min-width: 0;
    flex: 1;
}

html[data-ux-version="17"] .v16-task-card-footer .task-progress-chip {
    font-size: 7px;
}

html[data-ux-version="17"] .v16-task-card.completed .v16-task-title {
    color: #85867f;
    text-decoration: line-through;
}

html[data-ux-version="17"] .v16-task-card .task-expanded-summary {
    margin: 2px 0 0 58px;
    padding: 8px;
    border: 1px solid #ededE9;
    border-radius: 7px;
    background: #fafaf8;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-task-list-groups {
    display: grid;
    gap: 10px;
}

html[data-ux-version="17"] .v16-task-list-group {
    overflow: visible;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fff;
}

html[data-ux-version="17"] .v16-task-list-group > header {
    min-height: 39px;
    display: grid;
    grid-template-columns: 24px 7px auto auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-bottom: 1px solid var(--v16-line);
    background: #fafaf8;
}

html[data-ux-version="17"] .v16-task-list-group > header > button:first-child {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #888982;
    background: transparent;
}

html[data-ux-version="17"] .v16-task-list-group > header > button:first-child svg {
    width: 12px;
}

html[data-ux-version="17"] .v16-task-list-group > header > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-color, #85867f);
}

html[data-ux-version="17"] .v16-task-list-group > header > strong {
    font-size: 10px;
}

html[data-ux-version="17"] .v16-task-list-group > header > em {
    color: #8b8c85;
    font-size: 9px;
    font-style: normal;
}

html[data-ux-version="17"] .v16-task-list-group > header > button:last-child {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: 0;
    border-radius: 5px;
    color: #7c7d76;
    background: transparent;
    font-size: 8px;
}

html[data-ux-version="17"] .v16-task-list-group.collapsed > header {
    border-bottom: 0;
}

html[data-ux-version="17"] .v16-task-list-group.collapsed > header > button:first-child svg {
    transform: rotate(-90deg);
}

html[data-ux-version="17"] .v16-task-list-group.collapsed > div {
    display: none;
}

html[data-ux-version="17"] .v16-task-list-row {
    position: relative;
    min-width: 850px;
    min-height: 58px;
    display: grid;
    grid-template-columns: 44px minmax(250px, 1fr) 155px 140px 170px 34px;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-bottom: 1px solid #eeeeea;
}

html[data-ux-version="17"] .v16-task-list-row:last-child {
    border-bottom: 0;
}

html[data-ux-version="17"] .v16-task-list-row:hover {
    background: #fbfbf9;
}

html[data-ux-version="17"] .v16-list-select {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

html[data-ux-version="17"] .v16-list-task-main {
    min-width: 0;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
}

html[data-ux-version="17"] .v16-list-task-main > span,
html[data-ux-version="17"] .v16-list-task-main strong,
html[data-ux-version="17"] .v16-list-task-main small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .v16-list-task-main strong {
    font-size: 10px;
}

html[data-ux-version="17"] .v16-list-task-main small {
    margin-top: 2px;
    color: #888982;
    font-size: 8px;
}

html[data-ux-version="17"] .v16-list-task-main em {
    flex: 0 0 auto;
    font-size: 7px;
    font-style: normal;
}

html[data-ux-version="17"] .v16-list-field {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] .v16-list-field.assignee { grid-column: 3; }
html[data-ux-version="17"] .v16-list-field.due { grid-column: 4; }
html[data-ux-version="17"] .v16-list-field.project { grid-column: 5; }

html[data-ux-version="17"] .v16-list-field > span {
    display: none;
}

html[data-ux-version="17"] .v16-list-field select,
html[data-ux-version="17"] .v16-list-field input {
    min-width: 0;
    width: 100%;
    min-height: 30px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #666761;
    background: transparent;
    font-size: 8px;
}

html[data-ux-version="17"] .v16-list-field select:hover,
html[data-ux-version="17"] .v16-list-field input:hover,
html[data-ux-version="17"] .v16-list-field select:focus,
html[data-ux-version="17"] .v16-list-field input:focus {
    border-color: var(--v16-line);
    background: #fff;
}

html[data-ux-version="17"] .v16-list-field input.overdue {
    color: #a74039;
}

html[data-ux-version="17"] .v16-task-list-row > .row-actions-menu {
    grid-column: 6;
    justify-self: end;
}

html[data-ux-version="17"] .v16-row-status-editor {
    display: grid;
    gap: 4px;
    padding: 5px 7px 8px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v16-row-status-editor span {
    color: #8a8b84;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

html[data-ux-version="17"] .v16-row-status-editor select {
    min-height: 32px;
    border: 1px solid var(--v16-line);
    border-radius: 6px;
    font-size: 9px;
}

html[data-ux-version="17"] .v16-task-list-row.completed .v16-list-task-main strong {
    color: #898a83;
    text-decoration: line-through;
}

html[data-ux-version="17"] .task-list-view {
    overflow-x: auto;
}

/* Calendar is now calendar + selected-day agenda, not a second full-width feed. */

@media (min-width: 721px) {
    html[data-ux-version="17"] #task-calendar-view-container > .enhanced-calendar,
    html[data-ux-version="17"] #task-calendar-view-container .enhanced-calendar {
        display: grid;
        grid-template-columns: minmax(560px, 1.55fr) minmax(270px, .55fr);
        align-items: start;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--v16-line);
        border-radius: 11px;
        background: #fff;
    }

    html[data-ux-version="17"] .enhanced-calendar > .calendar-toolbar {
        grid-column: 1 / -1;
        margin: 0;
        padding: 11px 13px;
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] .enhanced-calendar > .calendar-grid {
        grid-column: 1;
        border: 0;
        border-right: 1px solid var(--v16-line);
        border-radius: 0;
    }

    html[data-ux-version="17"] .enhanced-calendar > .mobile-agenda {
        grid-column: 2;
        align-self: stretch;
        display: block;
        margin: 0;
        padding: 12px;
        border: 0;
        border-radius: 0;
        background: #fafaf8;
    }
}

/* Public read-only workspace */

html[data-ux-version="17"] .v16-public-share {
    padding: 32px;
    background: #f4f4f1;
}

html[data-ux-version="17"] .v16-public-share .public-share-card {
    width: min(1080px, 100%);
    max-width: 1080px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--v16-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(29, 30, 27, .08);
}

html[data-ux-version="17"] .v16-public-share .public-share-header {
    min-height: 66px;
    margin: 0;
    padding: 13px 20px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v16-public-share .brand-mark {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #dfe4df;
    border-radius: 9px !important;
    color: #4e6255 !important;
    background: #f2f6f3 !important;
}

html[data-ux-version="17"] .v16-public-share .public-share-readonly {
    color: #757871;
    background: #f7f7f4;
}

html[data-ux-version="17"] .v16-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: start;
    gap: clamp(28px, 5vw, 68px);
    padding: clamp(28px, 4vw, 50px) clamp(24px, 4vw, 48px) 30px;
}

html[data-ux-version="17"] .v16-public-hero .public-project-meta {
    max-width: 630px;
    padding-top: 7px;
}

html[data-ux-version="17"] .v16-public-hero .public-project-meta::before {
    content: "Seguimiento compartido";
    display: block;
    margin-bottom: 10px;
    color: #7c7e77;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

html[data-ux-version="17"] .v16-public-hero #public-project-name {
    margin-bottom: 12px !important;
    color: #20211f;
    font-size: clamp(28px, 4vw, 42px) !important;
    line-height: 1.05;
    letter-spacing: -.035em;
}

html[data-ux-version="17"] .v16-public-hero #public-project-desc {
    max-width: 58ch;
    color: #70736d !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

html[data-ux-version="17"] .v16-public-overview {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--v16-line);
    border-radius: 11px;
    background: #fafaf8;
}

html[data-ux-version="17"] .v16-public-overview > div:first-child {
    margin: 0 !important;
}

html[data-ux-version="17"] .v16-public-overview #public-progress-bar {
    background: #5e9472 !important;
}

html[data-ux-version="17"] .v16-public-overview .public-share-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--v16-line);
    border-radius: 0;
    background: transparent;
}

html[data-ux-version="17"] .v16-public-overview .public-share-summary > span {
    padding: 14px 8px 0;
    background: transparent;
}

html[data-ux-version="17"] .v16-public-content {
    padding: 0 clamp(24px, 4vw, 48px) 34px;
}

html[data-ux-version="17"] .v16-public-content .public-share-tabs {
    gap: 20px;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v16-public-content .public-share-tabs .tab-btn {
    min-height: 44px;
    padding: 0 1px;
    font-size: 11px;
}

html[data-ux-version="17"] .v16-public-content .public-list-item {
    min-height: 58px;
    margin: 0;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid #ecece8;
    border-radius: 0;
}

html[data-ux-version="17"] .v16-public-content .public-list-item:last-child {
    border-bottom: 0;
}

html[data-ux-version="17"] .v16-public-share .public-share-card > footer {
    margin-top: 0 !important;
    padding: 15px 20px !important;
    border-top: 1px solid var(--v16-line) !important;
    color: #898b85 !important;
    background: #fafaf8;
}

/* Assistant and task detail */

html[data-ux-version="17"] .assistant-dock {
    width: min(480px, calc(100vw - var(--v16-sidebar)));
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    padding: 0;
    border-left: 1px solid var(--v16-line);
    background: #fff;
    box-shadow: -18px 0 48px rgba(24, 25, 23, .09);
}

html[data-ux-version="17"] .assistant-dock-header {
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .assistant-dock-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

html[data-ux-version="17"] .assistant-dock-header h3,
html[data-ux-version="17"] .assistant-dock-header p {
    margin: 0;
}

html[data-ux-version="17"] .assistant-brand-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--v16-accent);
    background: var(--v16-accent-soft);
}

html[data-ux-version="17"] .assistant-brand-icon svg {
    width: 16px;
}

html[data-ux-version="17"] .assistant-context-bar {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px solid #eeeeea;
    color: #6e716d;
    background: #fafaf8;
    font-size: 9px;
}

html[data-ux-version="17"] .assistant-context-bar span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

html[data-ux-version="17"] .assistant-context-bar strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .assistant-context-bar svg {
    width: 13px;
}

html[data-ux-version="17"] .assistant-context-bar button {
    padding: 3px 5px;
    border: 0;
    color: #718177;
    background: transparent;
    font-size: 8px;
}

html[data-ux-version="17"] .assistant-scope-row {
    display: flex;
    gap: 5px;
    padding: 9px 12px;
    overflow-x: auto;
    border-bottom: 1px solid #eeeeea;
}

html[data-ux-version="17"] .assistant-scope-row button {
    min-height: 30px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--v16-line);
    border-radius: 999px;
    color: #666b67;
    background: #fff;
    font-size: 9px;
}

html[data-ux-version="17"] .assistant-scope-row button:hover {
    color: #325a41;
    border-color: #cad9cf;
    background: #f5f9f6;
}

html[data-ux-version="17"] .assistant-scope-row svg {
    width: 12px;
}

html[data-ux-version="17"] .assistant-dock-chat {
    padding: 14px;
    background: #fbfbfa;
}

html[data-ux-version="17"] .assistant-dock-input {
    margin: 0;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--v16-line);
    background: #fff;
}

html[data-ux-version="17"] .task-detail-drawer {
    width: min(860px, calc(100vw - 30px));
}

html[data-ux-version="17"] .task-detail-drawer.wide {
    width: min(1060px, calc(100vw - 30px));
}

html[data-ux-version="17"] .task-detail-drawer .drawer-body {
    padding: 0;
}

html[data-ux-version="17"] .v16-drawer-tabs {
    display: none;
}

html[data-ux-version="17"] .v16-drawer-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    align-items: start;
}

html[data-ux-version="17"] .v16-drawer-main,
html[data-ux-version="17"] .v16-drawer-aside {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 18px;
}

html[data-ux-version="17"] .v16-drawer-aside {
    min-height: 100%;
    border-left: 1px solid var(--v16-line);
    background: #fafaf8;
}

html[data-ux-version="17"] .v16-drawer-main .drawer-title-input {
    margin: 0 0 3px;
    padding: 3px 0 12px;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    font-size: 23px;
}

html[data-ux-version="17"] .v16-drawer-layout .task-detail-section {
    margin: 0;
    border-color: var(--v16-line);
    border-radius: 9px;
    background: #fff;
}

html[data-ux-version="17"] .v16-drawer-aside .drawer-properties-table {
    margin: 0;
    padding: 5px 0;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
    background: #fff;
}

html[data-ux-version="17"] .v16-drawer-aside .drawer-property-row {
    min-height: 40px;
    padding: 5px 9px;
}

html[data-ux-version="17"] .v16-drawer-aside .drawer-property-label {
    font-size: 9px;
}

html[data-ux-version="17"] .task-detail-drawer .drawer-footer {
    display: none;
}

/* Command menu */

html[data-ux-version="17"] .command-item-left > span {
    min-width: 0;
}

html[data-ux-version="17"] .command-item-left strong,
html[data-ux-version="17"] .command-item-left small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] .command-item-left small {
    margin-top: 2px;
    color: #8a8b84;
    font-size: 9px;
}

html[data-ux-version="17"] .command-badge {
    color: #8a8b84;
    font-size: 8px;
}

html[data-ux-version="17"] .command-empty {
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    padding: 24px;
    color: #85867f;
    text-align: center;
}

html[data-ux-version="17"] .command-empty svg {
    width: 24px;
}

html[data-ux-version="17"] .command-empty strong,
html[data-ux-version="17"] .command-empty small {
    display: block;
}

/* Mid-width desktop */

@media (max-width: 1320px) and (min-width: 961px) {
    :root {
        --v16-sidebar: 244px;
        --v16-page: 24px;
    }

    html[data-ux-version="17"] .v16-topbar {
        grid-template-columns: minmax(180px, .8fr) minmax(240px, 400px) auto;
    }

    html[data-ux-version="17"] .dashboard-workbench {
        grid-template-columns: minmax(0, 1.55fr) minmax(270px, .7fr);
    }

    html[data-ux-version="17"] .v16-focus-groups {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .v16-focus-group {
        border-right: 0;
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] .v16-focus-group:last-child {
        border-bottom: 0;
    }

    html[data-ux-version="17"] .v16-focus-group > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
    }

    html[data-ux-version="17"] .v16-projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .v16-project-hero {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .v16-project-hero .project-toolbar {
        justify-content: flex-start;
    }
}

/* Tablet */

@media (max-width: 960px) and (min-width: 721px) {
    html[data-ux-version="17"] .v16-topbar {
        grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.2fr) auto;
        padding-inline: 20px;
    }

    html[data-ux-version="17"] .topbar-assistant-button span,
    html[data-ux-version="17"] .topbar-title-line #page-kicker {
        display: none;
    }

    html[data-ux-version="17"] .page-frame {
        padding-inline: 20px;
    }

    html[data-ux-version="17"] .dashboard-capture {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .capture-shortcuts {
        grid-column: 1;
    }

    html[data-ux-version="17"] .dashboard-workbench {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .dashboard-context-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .dashboard-context-column .activity-panel {
        grid-column: 1 / -1;
    }

    html[data-ux-version="17"] .v16-projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .v16-project-hero,
    html[data-ux-version="17"] .v16-project-overview {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .v16-project-overview-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .v16-project-overview-aside .v16-secondary-panel {
        grid-column: 1 / -1;
    }
}

/* Dedicated touch/mobile composition */

@media (max-width: 720px) {
    :root {
        --v16-topbar: 56px;
        --v16-page: 14px;
    }

    html[data-ux-version="17"] #view-capture,
    html[data-ux-version="17"] #view-directory,
    html[data-ux-version="17"] #view-expenses,
    html[data-ux-version="17"] #view-client-portal,
    html[data-ux-version="17"] #view-integrations,
    html[data-ux-version="17"] #view-settings,
    html[data-ux-version="17"] #view-trash {
        min-width: 0;
        max-width: 100%;
        min-height: calc(100dvh - var(--v16-topbar));
        overflow-x: hidden;
    }

    html[data-ux-version="17"] body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
        background: #fff;
    }

    html[data-ux-version="17"] .v16-topbar {
        min-height: var(--v16-topbar);
        grid-template-columns: minmax(0, 1fr) 42px auto;
        gap: 7px;
        padding: 7px 12px;
    }

    html[data-ux-version="17"] .top-actions {
        flex: 0 0 auto;
        min-width: max-content;
    }

    html[data-ux-version="17"] .breadcrumbs,
    html[data-ux-version="17"] .topbar-title-line #page-kicker,
    html[data-ux-version="17"] .topbar-search span,
    html[data-ux-version="17"] .topbar-search kbd,
    html[data-ux-version="17"] .topbar-assistant-button span {
        display: none;
    }

    html[data-ux-version="17"] .topbar-title-line #page-title {
        overflow: hidden;
        font-size: 16px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-ux-version="17"] .topbar-search,
    html[data-ux-version="17"] .topbar-assistant-button {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        padding: 0;
        border: 0;
        background: transparent;
    }

    html[data-ux-version="17"] .topbar-profile .avatar {
        width: 32px;
        height: 32px;
    }

    html[data-ux-version="17"] .topbar-profile {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        display: grid;
        place-items: center;
    }

    html[data-ux-version="17"] .page-frame {
        width: 100%;
        padding: 14px 12px 28px;
    }

    html[data-ux-version="17"] .view-section > .page-title-row,
    html[data-ux-version="17"] #projects-list-container > .page-title-row {
        min-height: 38px;
        margin-bottom: 8px;
    }

    html[data-ux-version="17"] .view-section > .page-title-row .page-actions,
    html[data-ux-version="17"] #projects-list-container > .page-title-row > .btn {
        margin-left: auto;
    }

    html[data-ux-version="17"] .dashboard-welcome-row {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    html[data-ux-version="17"] .dashboard-welcome-row h2 {
        font-size: 24px;
    }

    html[data-ux-version="17"] .dashboard-welcome-row .muted-text {
        max-width: 300px;
        font-size: 10px;
    }

    html[data-ux-version="17"] .dashboard-plan-button {
        display: none;
    }

    html[data-ux-version="17"] .dashboard-capture {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 12px;
    }

    html[data-ux-version="17"] .capture-leading small {
        font-size: 9px;
    }

    html[data-ux-version="17"] .dashboard-capture-input {
        grid-template-columns: minmax(0, 1fr) 36px 36px 36px;
        min-height: 46px;
    }

    html[data-ux-version="17"] .dashboard-capture-input .field {
        font-size: 11px;
    }

    html[data-ux-version="17"] .capture-shortcuts {
        grid-column: 1;
        overflow-x: auto;
    }

    html[data-ux-version="17"] .capture-shortcuts button {
        min-height: 32px;
        flex: 0 0 auto;
    }

    html[data-ux-version="17"] .capture-chat-history.has-history {
        max-height: 74px;
    }

    html[data-ux-version="17"] .dashboard-mobile-actions {
        display: none !important;
    }

    html[data-ux-version="17"] .alerts-banner-container:not(:empty) {
        margin-bottom: 10px;
    }

    html[data-ux-version="17"] .dashboard-workbench,
    html[data-ux-version="17"] .dashboard-main-column,
    html[data-ux-version="17"] .dashboard-context-column {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    html[data-ux-version="17"] .v16-focus {
        padding: 12px;
    }

    html[data-ux-version="17"] .v16-focus > header {
        margin-bottom: 8px;
    }

    html[data-ux-version="17"] .v16-focus-groups {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .v16-focus-group {
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] .v16-focus-group:last-child {
        border-bottom: 0;
    }

    html[data-ux-version="17"] .v16-focus-group > div {
        display: grid;
        gap: 0;
    }

    html[data-ux-version="17"] .v16-focus-task {
        min-height: 55px;
        grid-template-columns: 24px minmax(0, 1fr) 28px 13px;
    }

    html[data-ux-version="17"] .dashboard-all-work {
        display: none;
    }

    html[data-ux-version="17"] .dashboard-context-column {
        margin-top: 0;
    }

    html[data-ux-version="17"] .dashboard-summary-card,
    html[data-ux-version="17"] .dashboard-spaces-panel,
    html[data-ux-version="17"] .dashboard-context-column .activity-panel {
        padding: 12px;
    }

    html[data-ux-version="17"] .dashboard-context-column .activity-panel {
        grid-column: auto;
    }

    html[data-ux-version="17"] .mobile-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: calc(62px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }

    html[data-ux-version="17"] .mobile-tabs a {
        min-width: 0;
    }

    html[data-ux-version="17"] .more-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] #more-menu-modal {
        align-items: flex-end;
    }

    html[data-ux-version="17"] #more-menu-modal .compact-modal {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    /* Mobile spaces are always a concise list, regardless of saved desktop mode. */
    html[data-ux-version="17"] .projects-portfolio-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 46px;
        margin-bottom: 8px;
        padding-bottom: 9px;
    }

    html[data-ux-version="17"] #project-count {
        display: none;
    }

    html[data-ux-version="17"] .project-portfolio-toggle {
        display: none;
    }

    html[data-ux-version="17"] .v16-projects-list,
    html[data-ux-version="17"] .v16-projects-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    html[data-ux-version="17"] .project-portfolio-head {
        display: none;
    }

    html[data-ux-version="17"] .project-portfolio-row,
    html[data-ux-version="17"] .project-portfolio-card {
        min-width: 0;
        min-height: 132px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        gap: 7px 9px;
        padding: 11px;
        border: 1px solid var(--v16-line);
        border-radius: 10px;
        background: #fff;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-main {
        grid-column: 1;
        grid-row: 1;
    }

    html[data-ux-version="17"] .project-portfolio-row > .workflow-state-pill {
        position: absolute;
        top: 12px;
        right: 44px;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-progress {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-next {
        position: static;
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 10px;
        max-width: none;
        text-align: left;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-next strong {
        grid-column: 2;
        grid-row: 1;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-next small {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-people {
        display: none;
    }

    html[data-ux-version="17"] .project-portfolio-row .project-portfolio-menu {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    html[data-ux-version="17"] .project-portfolio-card {
        min-height: 156px;
        grid-template-rows: auto 1fr auto auto;
    }

    /* Project becomes a mobile workspace page with three primary tabs. */
    html[data-ux-version="17"] .v16-project-detail .project-detail-back-btn {
        min-height: 34px;
    }

    html[data-ux-version="17"] .v16-project-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-bottom: 11px;
    }

    html[data-ux-version="17"] .v16-project-hero .project-detail-header {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 9px;
    }

    html[data-ux-version="17"] .v16-project-mark {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 15px;
    }

    html[data-ux-version="17"] .v16-project-hero .project-detail-header-left h2 {
        font-size: 20px !important;
    }

    html[data-ux-version="17"] .v16-project-hero .project-detail-header-left p {
        font-size: 9px !important;
    }

    html[data-ux-version="17"] .v16-project-hero .project-workflow-control {
        grid-column: 1 / -1;
        max-width: none;
    }

    html[data-ux-version="17"] .v16-project-hero .project-workflow-control select {
        width: 100%;
        min-height: 40px;
    }

    html[data-ux-version="17"] .v16-project-hero .project-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: start;
        gap: 6px;
    }

    html[data-ux-version="17"] .v16-project-hero .project-toolbar-primary {
        width: auto;
        min-width: 0;
        flex-wrap: nowrap;
    }

    html[data-ux-version="17"] .v16-project-hero .project-toolbar-secondary {
        width: 44px;
        min-width: 44px;
        flex-wrap: nowrap;
    }

    html[data-ux-version="17"] .v16-project-hero .project-toolbar-primary .btn.primary {
        flex: 1;
        width: 100%;
        min-height: 42px;
    }

    html[data-ux-version="17"] .v16-project-hero .project-toolbar-secondary > .btn,
    html[data-ux-version="17"] .v16-project-hero .project-toolbar-secondary > .print-action {
        display: none;
    }

    html[data-ux-version="17"] .v16-project-context-line {
        gap: 9px;
        overflow-x: auto;
        white-space: nowrap;
    }

    html[data-ux-version="17"] .v16-project-context-line > span:nth-child(2) {
        display: none;
    }

    html[data-ux-version="17"] .v16-project-context-line button {
        margin-left: auto;
        flex: 0 0 auto;
        min-height: 32px;
    }

    html[data-ux-version="17"] .v16-project-detail .project-view-tabs {
        min-height: 46px;
        overflow: visible;
    }

    html[data-ux-version="17"] .v16-project-detail .project-view-tabs > button,
    html[data-ux-version="17"] .project-secondary-views > summary {
        flex: 1;
        justify-content: center;
        min-height: 45px;
        padding-inline: 7px;
    }

    html[data-ux-version="17"] .project-secondary-views {
        flex: .8;
    }

    html[data-ux-version="17"] .project-secondary-views > div {
        right: 0;
        left: auto;
    }

    html[data-ux-version="17"] .v16-project-overview {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    html[data-ux-version="17"] .v16-project-overview > .project-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .v16-project-overview > .project-summary-strip > article {
        min-height: 69px;
        border-right: 1px solid var(--v16-line);
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] .v16-project-overview > .project-summary-strip > article:nth-child(2n) {
        border-right: 0;
    }

    html[data-ux-version="17"] .v16-project-overview > .project-summary-strip > article:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    html[data-ux-version="17"] .v16-project-overview-main,
    html[data-ux-version="17"] .v16-project-overview-aside {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    html[data-ux-version="17"] .v16-project-overview-aside .v16-secondary-panel {
        grid-column: auto;
    }

    html[data-ux-version="17"] .v16-project-overview .project-detail-column,
    html[data-ux-version="17"] .v16-project-overview .space-resources,
    html[data-ux-version="17"] .v16-project-health,
    html[data-ux-version="17"] .v16-secondary-panel {
        padding: 11px;
    }

    html[data-ux-version="17"] .space-resource-strip {
        grid-template-columns: minmax(160px, 1fr);
    }

    /* Mobile tasks: view selector, compact grouped rows and status-tab board. */
    html[data-ux-version="17"] .task-page-heading {
        display: none;
    }

    html[data-ux-version="17"] .task-view-strip {
        margin: -2px 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html[data-ux-version="17"] .task-view-strip::-webkit-scrollbar {
        display: none;
    }

    html[data-ux-version="17"] .task-primary-views {
        flex: 0 0 auto;
    }

    html[data-ux-version="17"] .task-primary-views .view-toggle-btn {
        min-width: 84px;
        min-height: 44px;
        justify-content: center;
    }

    html[data-ux-version="17"] #task-results-summary {
        display: none;
    }

    html[data-ux-version="17"] .task-mobile-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        margin-bottom: 8px;
    }

    html[data-ux-version="17"] .task-control-bar {
        position: fixed;
        z-index: 90;
        inset: auto 0 0;
        min-height: auto;
        display: block;
        margin: 0;
        padding: 12px 12px calc(78px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -16px 44px rgba(25, 25, 25, .16);
        transform: translateY(110%);
        transition: transform .2s ease;
    }

    html[data-ux-version="17"] body.task-filters-open .task-control-bar,
    html[data-ux-version="17"] #view-tasks.mobile-filters-open .task-control-bar {
        transform: translateY(0);
    }

    html[data-ux-version="17"] .task-control-bar .task-mobile-sheet-head {
        display: flex;
    }

    html[data-ux-version="17"] .task-control-bar .plane-toolbar-left,
    html[data-ux-version="17"] .task-control-bar .plane-toolbar-right {
        display: grid;
        gap: 9px;
    }

    html[data-ux-version="17"] .task-search-box {
        width: 100%;
        min-height: 44px;
    }

    html[data-ux-version="17"] .task-filter-disclosure,
    html[data-ux-version="17"] .task-options-disclosure {
        width: 100%;
    }

    html[data-ux-version="17"] .task-filter-disclosure > summary,
    html[data-ux-version="17"] .task-options-disclosure > summary {
        width: 100%;
        min-height: 44px;
    }

    html[data-ux-version="17"] .task-filter-popover,
    html[data-ux-version="17"] .task-options-popover {
        position: static;
        width: 100%;
        margin-top: 6px;
        box-shadow: none;
    }

    html[data-ux-version="17"] .task-filter-popover {
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] .task-filter-popover .task-clear-filters {
        grid-column: auto;
    }

    html[data-ux-version="17"] .v16-mobile-task-list {
        display: grid;
        gap: 10px;
    }

    html[data-ux-version="17"] .v16-mobile-task-list > section {
        overflow: hidden;
        border: 1px solid var(--v16-line);
        border-radius: 10px;
        background: #fff;
    }

    html[data-ux-version="17"] .v16-mobile-task-list > section > header {
        min-height: 37px;
        display: grid;
        grid-template-columns: 7px minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border-bottom: 1px solid var(--v16-line);
        background: #fafaf8;
    }

    html[data-ux-version="17"] .v16-mobile-task-list > section > header > span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--status-color, #85867f);
    }

    html[data-ux-version="17"] .v16-mobile-task-list > section > header strong {
        font-size: 10px;
    }

    html[data-ux-version="17"] .v16-mobile-task-list > section > header em {
        color: #888982;
        font-size: 9px;
        font-style: normal;
    }

    html[data-ux-version="17"] .v16-mobile-task-row {
        min-width: 0;
        min-height: 74px;
        display: grid;
        grid-template-columns: 25px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 9px 10px;
        border-bottom: 1px solid #eeeeea;
    }

    html[data-ux-version="17"] .v16-mobile-task-row:last-child {
        border-bottom: 0;
    }

    html[data-ux-version="17"] .v16-mobile-task-main {
        min-width: 0;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        border: 0;
        color: inherit;
        background: transparent;
        text-align: left;
    }

    html[data-ux-version="17"] .v16-mobile-task-main strong,
    html[data-ux-version="17"] .v16-mobile-task-main small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-ux-version="17"] .v16-mobile-task-main strong {
        font-size: 11px;
    }

    html[data-ux-version="17"] .v16-mobile-task-main small {
        margin-top: 4px;
        color: #85867f;
        font-size: 8px;
    }

    html[data-ux-version="17"] .v16-mobile-task-main small span {
        width: 6px;
        height: 6px;
        display: inline-block;
        margin-right: 5px;
        border-radius: 50%;
        background: var(--status-color, #85867f);
    }

    html[data-ux-version="17"] .v16-mobile-task-end {
        display: grid;
        justify-items: end;
        gap: 5px;
    }

    html[data-ux-version="17"] .v16-mobile-task-end > strong {
        color: #85867f;
        font-size: 8px;
        font-weight: 500;
    }

    html[data-ux-version="17"] .v16-mobile-task-end > strong.overdue {
        color: #aa413a;
    }

    html[data-ux-version="17"] .v16-mobile-task-end .ux-assignee-avatar {
        width: 24px;
        height: 24px;
        font-size: 7px;
    }

    html[data-ux-version="17"] .v16-mobile-task-row.completed .v16-mobile-task-main strong {
        color: #8d8e87;
        text-decoration: line-through;
    }

    html[data-ux-version="17"] .v16-mobile-kanban-tabs {
        display: flex;
        gap: 5px;
        margin: 0 -12px 8px;
        padding: 0 12px 3px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html[data-ux-version="17"] .v16-mobile-kanban-tabs::-webkit-scrollbar {
        display: none;
    }

    html[data-ux-version="17"] .v16-mobile-kanban-tabs button {
        min-height: 36px;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 7px;
        padding: 5px 10px;
        border: 1px solid var(--v16-line);
        border-radius: 999px;
        color: #777872;
        background: #fff;
        font-size: 9px;
    }

    html[data-ux-version="17"] .v16-mobile-kanban-tabs button.active {
        color: #fff;
        border-color: #292a27;
        background: #292a27;
    }

    html[data-ux-version="17"] .v16-mobile-kanban-tabs button strong {
        color: inherit;
        font-size: 8px;
    }

    html[data-ux-version="17"] #view-tasks .kanban-board,
    html[data-ux-version="17"] #view-tasks .kanban-board.grouped-priority,
    html[data-ux-version="17"] #view-tasks .kanban-board.grouped-project,
    html[data-ux-version="17"] #view-tasks .kanban-board.grouped-tag {
        display: block;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    html[data-ux-version="17"] #view-tasks .kanban-board > .kanban-column {
        display: none;
        width: 100%;
        min-width: 0;
        min-height: 360px;
        margin: 0;
        scroll-snap-align: none;
    }

    html[data-ux-version="17"] #view-tasks .kanban-board[data-mobile-column] > .kanban-column {
        display: none;
    }

    html[data-ux-version="17"] #view-tasks .kanban-board[data-mobile-column="preview-todo"] > [data-drop-value="preview-todo"],
    html[data-ux-version="17"] #view-tasks .kanban-board[data-mobile-column="preview-doing"] > [data-drop-value="preview-doing"],
    html[data-ux-version="17"] #view-tasks .kanban-board[data-mobile-column="preview-review"] > [data-drop-value="preview-review"],
    html[data-ux-version="17"] #view-tasks .kanban-board[data-mobile-column="preview-done"] > [data-drop-value="preview-done"] {
        display: block;
    }

    /* The JS also applies an inline-neutral generic fallback for production IDs. */
    html[data-ux-version="17"] #view-tasks .kanban-board > .kanban-column.v16-mobile-active {
        display: block;
    }

    html[data-ux-version="17"] .v16-task-card {
        min-height: 112px;
        padding: 10px;
    }

    html[data-ux-version="17"] .v16-task-card .task-drag-handle,
    html[data-ux-version="17"] .v16-task-card .task-select-checkbox {
        display: none;
    }

    html[data-ux-version="17"] .v16-task-card-head {
        grid-template-columns: 24px minmax(0, 1fr) 34px;
        align-items: start;
    }

    html[data-ux-version="17"] .v16-task-title {
        font-size: 12px;
    }

    html[data-ux-version="17"] .v16-task-context,
    html[data-ux-version="17"] .v16-task-card-footer {
        padding-left: 29px;
    }

    html[data-ux-version="17"] .v16-task-card .row-actions-menu > summary {
        width: 34px;
        min-height: 34px;
    }

    /* Mobile calendar is week + agenda; the 42-cell month is intentionally gone. */
    html[data-ux-version="17"] #task-calendar-view-container .enhanced-calendar {
        display: block;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    html[data-ux-version="17"] #task-calendar-view-container .calendar-toolbar {
        margin: 0 0 8px;
        padding: 10px;
        border: 1px solid var(--v16-line);
        border-radius: 10px;
        background: #fff;
    }

    html[data-ux-version="17"] #task-calendar-view-container .calendar-grid {
        display: none !important;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
        margin-bottom: 8px;
        padding: 7px;
        border: 1px solid var(--v16-line);
        border-radius: 10px;
        background: #fff;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button {
        position: relative;
        min-width: 0;
        min-height: 53px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 1px;
        padding: 4px 1px;
        border: 0;
        border-radius: 8px;
        color: #72736d;
        background: transparent;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button small {
        font-size: 7px;
        text-transform: uppercase;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button strong {
        font-size: 13px;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button.active {
        color: #fff;
        background: #2e302d;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button.today:not(.active) strong {
        color: var(--v16-accent);
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button i {
        position: absolute;
        right: 3px;
        bottom: 3px;
        min-width: 13px;
        height: 13px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: var(--v16-accent);
        font-size: 6px;
        font-style: normal;
    }

    html[data-ux-version="17"] .v16-mobile-week-strip button.active i {
        color: #2e302d;
        background: #fff;
    }

    html[data-ux-version="17"] #task-calendar-view-container .mobile-agenda {
        margin: 0;
        padding: 10px;
        border: 1px solid var(--v16-line);
        border-radius: 10px;
        background: #fff;
    }

    html[data-ux-version="17"] .timeline-mobile-agenda .ux-mobile-task-controls {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .file-pagination {
        position: static;
        bottom: auto;
        z-index: auto;
        min-height: 38px;
        margin-top: 4px;
        padding: 8px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Files: one search row and the two essential actions first. */
    html[data-ux-version="17"] #view-capture > .page-title-row {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .file-library-panel {
        margin-top: 0;
    }

    html[data-ux-version="17"] #view-capture .transfer-summary:empty,
    html[data-ux-version="17"] #view-capture .transfer-summary:not(.has-active-transfer) {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .file-library-topbar {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
    }

    html[data-ux-version="17"] #view-capture .file-mobile-control {
        width: 44px;
        min-width: 44px;
        padding: 0;
        font-size: 0;
    }

    html[data-ux-version="17"] #view-capture .file-mobile-control svg {
        width: 17px;
    }

    /* Public links are standalone reading pages on touch devices. */
    html[data-ux-version="17"] .v16-public-share {
        align-items: flex-start;
        width: 100%;
        min-height: 100dvh;
        padding: 0;
        background: #fff;
    }

    html[data-ux-version="17"] .v16-public-share .public-share-card {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html[data-ux-version="17"] .v16-public-share .public-share-header {
        min-height: 62px;
        flex-direction: row;
        align-items: center;
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    }

    html[data-ux-version="17"] .v16-public-share .public-share-header-actions {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    html[data-ux-version="17"] .v16-public-share .public-share-readonly {
        display: none;
    }

    html[data-ux-version="17"] .v16-public-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px 16px 20px;
    }

    html[data-ux-version="17"] .v16-public-hero #public-project-name {
        font-size: 28px !important;
    }

    html[data-ux-version="17"] .v16-public-overview {
        padding: 14px;
    }

    html[data-ux-version="17"] .v16-public-overview .public-share-summary > span {
        padding-inline: 4px;
    }

    html[data-ux-version="17"] .v16-public-content {
        padding: 0 16px 26px;
    }

    html[data-ux-version="17"] .v16-public-content .public-share-tabs {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    html[data-ux-version="17"] .v16-public-content .public-list-item {
        min-height: 62px;
        padding-inline: 4px;
    }

    /* Assistant is a true mobile page. */
    html[data-ux-version="17"] .assistant-dock {
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        padding: 0;
        border: 0;
        border-radius: 0;
        transform: translateY(100%);
        box-shadow: none;
    }

    html[data-ux-version="17"] .assistant-dock.active {
        transform: translateY(0);
    }

    html[data-ux-version="17"] .assistant-dock-header {
        min-height: 58px;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    html[data-ux-version="17"] .assistant-context-bar {
        min-height: 42px;
    }

    html[data-ux-version="17"] .assistant-scope-row {
        min-height: 49px;
    }

    html[data-ux-version="17"] .assistant-scope-row button {
        min-height: 34px;
    }

    html[data-ux-version="17"] .assistant-dock-chat {
        padding: 12px;
    }

    html[data-ux-version="17"] .assistant-dock-input {
        position: sticky;
        bottom: 0;
        min-height: 64px;
    }

    html[data-ux-version="17"] .assistant-fab {
        display: none !important;
    }

    /* Task detail is full-screen with explicit Details / Activity tabs. */
    html[data-ux-version="17"] .task-detail-drawer,
    html[data-ux-version="17"] .task-detail-drawer.wide {
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    html[data-ux-version="17"] .task-detail-drawer .drawer-header {
        min-height: 58px;
        padding-top: max(9px, env(safe-area-inset-top));
    }

    html[data-ux-version="17"] .task-detail-drawer .drawer-header-actions button[title="Ampliar ficha"] {
        display: none;
    }

    html[data-ux-version="17"] .v16-drawer-tabs {
        min-height: 44px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 12px;
        border-bottom: 1px solid var(--v16-line);
        background: #fff;
    }

    html[data-ux-version="17"] .v16-drawer-tabs button {
        min-height: 43px;
        border: 0;
        border-bottom: 2px solid transparent;
        color: #7a7b75;
        background: transparent;
        font-size: 10px;
        font-weight: 600;
    }

    html[data-ux-version="17"] .v16-drawer-tabs button.active {
        color: #20211f;
        border-bottom-color: #2f302d;
    }

    html[data-ux-version="17"] .v16-drawer-layout {
        display: block;
    }

    html[data-ux-version="17"] .v16-drawer-main,
    html[data-ux-version="17"] .v16-drawer-aside {
        padding: 13px 12px calc(24px + env(safe-area-inset-bottom));
        border: 0;
        background: #fff;
    }

    html[data-ux-version="17"] .v16-drawer-aside {
        padding-top: 0;
    }

    html[data-ux-version="17"] .v16-drawer-main .drawer-title-input {
        font-size: 20px;
    }

    html[data-ux-version="17"] .task-detail-drawer[data-mobile-tab="details"] .v16-drawer-main details:has(#drawer-comments-list),
    html[data-ux-version="17"] .task-detail-drawer[data-mobile-tab="activity"] .v16-drawer-main > :not(details:has(#drawer-comments-list)),
    html[data-ux-version="17"] .task-detail-drawer[data-mobile-tab="activity"] .v16-drawer-aside {
        display: none;
    }

    html[data-ux-version="17"] .task-detail-drawer[data-mobile-tab="activity"] .v16-drawer-main details:has(#drawer-comments-list) {
        display: block;
        min-height: calc(100dvh - 142px);
    }

    html[data-ux-version="17"] .task-detail-drawer[data-mobile-tab="activity"] .comment-input-row {
        position: sticky;
        bottom: 0;
        padding: 8px 0 max(8px, env(safe-area-inset-bottom));
        background: #fff;
    }
}

@media (max-width: 420px) {
    html[data-ux-version="17"] .dashboard-capture-input {
        grid-template-columns: minmax(0, 1fr) 34px 34px;
    }

    html[data-ux-version="17"] .dashboard-capture-input #chat-mic-btn {
        display: none;
    }

    html[data-ux-version="17"] .capture-shortcuts button:nth-child(2) {
        display: none;
    }

    html[data-ux-version="17"] .dashboard-compact-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .task-primary-views .view-toggle-btn {
        min-width: 78px;
        padding-inline: 8px;
    }

    html[data-ux-version="17"] .project-portfolio-row > .workflow-state-pill {
        display: none;
    }

    html[data-ux-version="17"] .v16-project-detail .project-view-tabs > button svg,
    html[data-ux-version="17"] .project-secondary-views > summary > svg:first-child {
        display: none;
    }
}

@media print {
    html[data-ux-version="17"] .sidebar-command-zone,
    html[data-ux-version="17"] .dashboard-capture,
    html[data-ux-version="17"] .task-view-strip,
    html[data-ux-version="17"] .task-control-bar,
    html[data-ux-version="17"] .projects-portfolio-toolbar,
    html[data-ux-version="17"] .v16-project-context-line button,
    html[data-ux-version="17"] .project-portfolio-menu,
    html[data-ux-version="17"] .project-secondary-views {
        display: none !important;
    }

    html[data-ux-version="17"] .dashboard-workbench,
    html[data-ux-version="17"] .v16-project-overview {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* V17 — secondary tools become first-class workspaces                        */
/* ========================================================================== */

:root {
    --v17-rail: 228px;
    --v17-drawer: min(520px, 46vw);
    --v17-row: 64px;
}

html[data-ux-version="17"] .v17-action-menu,
html[data-ux-version="17"] .row-actions-menu {
    position: relative;
}

html[data-ux-version="17"] .v17-action-menu > summary,
html[data-ux-version="17"] .row-actions-menu > summary {
    list-style: none;
    cursor: pointer;
}

html[data-ux-version="17"] .v17-action-menu > summary::-webkit-details-marker,
html[data-ux-version="17"] .row-actions-menu > summary::-webkit-details-marker {
    display: none;
}

html[data-ux-version="17"] .v17-action-menu > summary.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

html[data-ux-version="17"] .v17-action-menu > summary.btn svg:last-child {
    width: 13px;
    height: 13px;
    margin-left: 2px;
}

html[data-ux-version="17"] .v17-action-popover {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 190;
    width: 278px;
    display: grid;
    gap: 3px;
    padding: 7px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(28, 29, 27, .14);
}

html[data-ux-version="17"] .v17-action-popover.compact {
    width: 228px;
}

html[data-ux-version="17"] .v17-action-popover > button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    color: var(--v16-ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

html[data-ux-version="17"] .v17-action-popover > button:hover {
    background: var(--v16-soft);
}

html[data-ux-version="17"] .v17-action-popover > button svg {
    width: 17px;
    height: 17px;
    color: var(--v16-muted);
    flex: 0 0 auto;
}

html[data-ux-version="17"] .v17-action-popover > button span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] .v17-action-popover > button strong {
    font-size: 12px;
}

html[data-ux-version="17"] .v17-action-popover > button small {
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] .v17-action-popover > button.danger,
html[data-ux-version="17"] .v17-action-popover > button.danger svg {
    color: #b42318;
}

html[data-ux-version="17"] .v17-section-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    margin-bottom: 18px;
    padding: 3px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v17-section-tabs > button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px 7px 0 0;
    color: var(--v16-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 620;
    cursor: pointer;
}

html[data-ux-version="17"] .v17-section-tabs > button svg {
    width: 15px;
    height: 15px;
}

html[data-ux-version="17"] .v17-section-tabs > button:hover {
    color: var(--v16-ink);
    background: var(--v16-soft);
}

html[data-ux-version="17"] .v17-section-tabs > button.active {
    color: var(--v16-ink);
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--v16-ink);
}

html[data-ux-version="17"] .v17-section-tabs > button span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 10px;
    background: var(--v16-soft-2);
    font-size: 10px;
}

/* Navigation and More */

html[data-ux-version="17"] .sidebar-nav {
    padding-bottom: 10px;
}

html[data-ux-version="17"] .sidebar-group-label:not(:first-child) {
    margin-top: 10px;
}

html[data-ux-version="17"] .more-menu-groups {
    display: grid;
    gap: 18px;
}

html[data-ux-version="17"] .more-menu-section {
    display: grid;
    gap: 7px;
}

html[data-ux-version="17"] .more-menu-label {
    margin: 0;
    color: var(--v16-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}

html[data-ux-version="17"] .more-menu-section .more-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

html[data-ux-version="17"] .more-menu-section .more-menu-grid a {
    min-height: 72px;
}

/* Files */

@media (min-width: 961px) {
    html[data-ux-version="17"] body[data-context="capture"] .workspace-selector.sidebar-primary {
        display: grid !important;
    }

    html[data-ux-version="17"] body[data-context="capture"] .sidebar-command-zone.sidebar-primary {
        display: grid !important;
    }

    html[data-ux-version="17"] body[data-context="capture"] .sidebar-nav.sidebar-primary {
        display: grid !important;
    }

    html[data-ux-version="17"] body[data-context="capture"] .sidebar-section.sidebar-primary,
    html[data-ux-version="17"] body[data-context="capture"] .sync-indicator.sidebar-primary {
        display: flex !important;
    }

    html[data-ux-version="17"] body[data-context="capture"] #files-context-sidebar {
        display: none !important;
    }

    html[data-ux-version="17"] body[data-context="capture"] .workspace {
        width: calc(100% - var(--v16-sidebar));
        margin-left: var(--v16-sidebar);
    }
}

html[data-ux-version="17"] #view-capture .page-title-row {
    margin-bottom: 17px;
}

html[data-ux-version="17"] #view-capture .file-library-panel {
    margin-top: 0;
    padding: 0;
    overflow: visible;
    border-radius: 10px;
}

html[data-ux-version="17"] #view-capture .v17-file-smart-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 48px;
    padding: 7px 12px 0;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-capture .v17-file-smart-tabs button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px 7px 0 0;
    color: var(--v16-muted);
    background: transparent;
    font-size: 11px;
    font-weight: 620;
    cursor: pointer;
}

html[data-ux-version="17"] #view-capture .v17-file-smart-tabs button svg {
    width: 14px;
    height: 14px;
}

html[data-ux-version="17"] #view-capture .v17-file-smart-tabs button.active {
    color: var(--v16-ink);
    background: var(--v16-soft);
    box-shadow: inset 0 -2px 0 var(--v16-ink);
}

html[data-ux-version="17"] #view-capture .file-library-topbar {
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 8px;
    min-height: 58px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--v16-line);
    background: #fff;
}

html[data-ux-version="17"] #view-capture .file-search-box {
    max-width: 520px;
}

html[data-ux-version="17"] #view-capture .v17-file-filter-menu {
    position: relative;
}

html[data-ux-version="17"] #view-capture .v17-file-filter-menu > summary {
    list-style: none;
}

html[data-ux-version="17"] #view-capture .v17-file-filter-menu > summary::-webkit-details-marker {
    display: none;
}

html[data-ux-version="17"] #view-capture .v17-file-filter-menu > summary svg:last-child {
    width: 12px;
    height: 12px;
}

html[data-ux-version="17"] #view-capture .file-filter-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 150;
    width: 250px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--v16-shadow);
}

html[data-ux-version="17"] #view-capture .file-filter-panel .file-mobile-panel-head {
    display: none;
}

html[data-ux-version="17"] #view-capture .file-library-shell {
    grid-template-columns: var(--v17-rail) minmax(0, 1fr);
    min-height: 520px;
    background: #fff;
}

html[data-ux-version="17"] #view-capture .file-nav-pane {
    display: block !important;
    padding: 14px 10px;
    border-right: 1px solid var(--v16-line);
    background: #fafaf8;
}

html[data-ux-version="17"] #view-capture .file-nav-pane .file-mobile-panel-head {
    display: flex;
    min-height: 34px;
    padding: 0 5px;
}

html[data-ux-version="17"] #view-capture .file-nav-pane .file-mobile-panel-head button {
    display: none;
}

html[data-ux-version="17"] #view-capture .file-nav-search {
    margin: 5px 2px 10px;
    background: #fff;
}

html[data-ux-version="17"] #view-capture .file-location-item {
    min-height: 34px;
    border-radius: 6px;
}

html[data-ux-version="17"] #view-capture .file-results-pane {
    min-width: 0;
    padding: 0 14px 14px;
}

html[data-ux-version="17"] #view-capture .file-results-head {
    min-height: 58px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-capture .file-results-head .ai-create-button {
    display: none !important;
}

html[data-ux-version="17"] #view-capture .transfer-summary {
    min-height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    margin: 0;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    background: transparent;
}

html[data-ux-version="17"] #view-capture .transfer-summary > div {
    min-width: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
}

html[data-ux-version="17"] #view-capture .transfer-summary strong {
    font-size: 11px;
}

html[data-ux-version="17"] #view-capture .transfer-summary span {
    font-size: 9px;
    text-transform: none;
    letter-spacing: 0;
}

html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-table-head,
html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-row {
    grid-template-columns: minmax(210px, 1.55fr) minmax(140px, 1fr) minmax(110px, .75fr) 72px 84px 54px;
}

html[data-ux-version="17"] #view-capture .file-row {
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-capture .file-row-open {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

html[data-ux-version="17"] #view-capture .file-row-open:focus-visible {
    outline: 2px solid var(--v16-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

html[data-ux-version="17"] #view-capture .file-list.grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    padding-top: 12px;
}

html[data-ux-version="17"] #view-capture .file-list.grid .file-row {
    min-height: 188px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
    background: #fff;
}

html[data-ux-version="17"] #view-capture .file-list.grid .file-row-main {
    flex: 1;
    align-items: flex-start;
}

html[data-ux-version="17"] #view-capture .file-list.grid .file-icon {
    width: 44px;
    height: 44px;
    border-radius: 9px;
}

html[data-ux-version="17"] #view-capture .file-list.grid .file-row-info {
    padding-top: 3px;
}

html[data-ux-version="17"] #view-capture .file-list.grid .file-cell-location {
    display: flex !important;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--v16-line);
    font-size: 10px;
}

html[data-ux-version="17"] #view-capture .file-list.grid .file-actions {
    position: absolute;
    top: 9px;
    right: 8px;
}

html[data-ux-version="17"] #view-capture .file-preview-overlay.active {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(28, 29, 27, .18);
}

html[data-ux-version="17"] #view-capture .file-preview-dialog {
    width: min(760px, 64vw);
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -20px 0 60px rgba(28, 29, 27, .15);
}

/* People */

html[data-ux-version="17"] #view-directory .v17-directory-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 20px;
    align-items: start;
}

html[data-ux-version="17"] #view-directory .v17-directory-main {
    min-width: 0;
}

html[data-ux-version="17"] #view-directory .v17-directory-tabs {
    display: flex;
    gap: 4px;
    padding-bottom: 10px;
    overflow-x: auto;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-directory .v17-directory-tabs button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    color: var(--v16-muted);
    background: transparent;
    font-size: 11px;
    font-weight: 620;
    white-space: nowrap;
    cursor: pointer;
}

html[data-ux-version="17"] #view-directory .v17-directory-tabs button span {
    min-width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: var(--v16-soft-2);
    font-size: 9px;
}

html[data-ux-version="17"] #view-directory .v17-directory-tabs button.active {
    color: var(--v16-ink);
    background: var(--v16-soft-2);
}

html[data-ux-version="17"] #view-directory .directory-toolbar {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 10px;
    margin: 0;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-directory #directory-type {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

html[data-ux-version="17"] #view-directory .v17-directory-view-switch {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--v16-line);
    border-radius: 7px;
    background: var(--v16-soft);
}

html[data-ux-version="17"] #view-directory .v17-directory-view-switch button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    color: var(--v16-muted);
    background: transparent;
    cursor: pointer;
}

html[data-ux-version="17"] #view-directory .v17-directory-view-switch button.active {
    color: var(--v16-ink);
    background: #fff;
    box-shadow: 0 1px 3px rgba(24, 25, 23, .09);
}

html[data-ux-version="17"] #view-directory .v17-person-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 6px;
}

html[data-ux-version="17"] #view-directory .v17-person-row {
    min-width: 0;
    min-height: var(--v17-row);
    display: grid;
    grid-template-columns: 22px minmax(190px, 1.1fr) 100px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-bottom: 1px solid var(--v16-line);
    background: #fff;
}

html[data-ux-version="17"] #view-directory .v17-person-row:hover {
    background: #fbfbf9;
}

html[data-ux-version="17"] #view-directory .v17-person-row.selected {
    background: var(--v16-accent-soft);
}

html[data-ux-version="17"] #view-directory .v17-person-open {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

html[data-ux-version="17"] #view-directory .contact-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f0f0ec;
    color: #50514c;
}

html[data-ux-version="17"] #view-directory .contact-card-avatar.team {
    background: var(--v16-accent-soft);
    color: var(--v16-accent);
}

html[data-ux-version="17"] #view-directory .v17-person-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] #view-directory .v17-person-name strong,
html[data-ux-version="17"] #view-directory .v17-person-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-directory .v17-person-name strong {
    font-size: 12px;
}

html[data-ux-version="17"] #view-directory .v17-person-name small {
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] #view-directory .v17-person-relation,
html[data-ux-version="17"] #view-directory .v17-access-state {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    color: #5e5f59;
    background: var(--v16-soft-2);
    font-size: 9px;
    font-weight: 650;
}

html[data-ux-version="17"] #view-directory .v17-person-relation.team,
html[data-ux-version="17"] #view-directory .v17-access-state {
    color: var(--v16-accent);
    background: var(--v16-accent-soft);
}

html[data-ux-version="17"] #view-directory .v17-access-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

html[data-ux-version="17"] #view-directory .v17-person-contact {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] #view-directory .v17-person-contact a,
html[data-ux-version="17"] #view-directory .v17-person-empty {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--v16-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-directory .v17-person-contact svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

html[data-ux-version="17"] #view-directory .v17-selection-placeholder {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: var(--v16-accent);
}

html[data-ux-version="17"] #view-directory .v17-directory-rail {
    position: sticky;
    top: calc(var(--v16-topbar) + 18px);
    padding: 14px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fafaf8;
}

html[data-ux-version="17"] .v17-rail-heading,
html[data-ux-version="17"] .v17-settings-nav-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v17-icon-box {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--v16-line);
    border-radius: 8px;
    color: var(--v16-muted);
    background: #fff;
}

html[data-ux-version="17"] .v17-icon-box svg {
    width: 15px;
    height: 15px;
}

html[data-ux-version="17"] .v17-rail-heading > div,
html[data-ux-version="17"] .v17-settings-nav-heading > div {
    display: grid;
    gap: 1px;
}

html[data-ux-version="17"] .v17-rail-heading small,
html[data-ux-version="17"] .v17-settings-nav-heading small {
    color: var(--v16-muted);
    font-size: 9px;
}

html[data-ux-version="17"] .v17-rail-heading strong,
html[data-ux-version="17"] .v17-settings-nav-heading strong {
    font-size: 12px;
}

html[data-ux-version="17"] .v17-relationship-total {
    display: grid;
    gap: 1px;
    padding: 17px 2px 12px;
}

html[data-ux-version="17"] .v17-relationship-total strong {
    font-size: 26px;
    letter-spacing: -.04em;
}

html[data-ux-version="17"] .v17-relationship-total span {
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] .v17-relationship-list {
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] .v17-relationship-list button {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    color: var(--v16-muted);
    background: transparent;
    font-size: 10px;
    cursor: pointer;
}

html[data-ux-version="17"] .v17-relationship-list button:hover {
    color: var(--v16-ink);
    background: #fff;
}

html[data-ux-version="17"] .v17-relationship-list button span {
    display: flex;
    align-items: center;
    gap: 7px;
}

html[data-ux-version="17"] .v17-relationship-list svg {
    width: 13px;
    height: 13px;
}

html[data-ux-version="17"] .v17-rail-note {
    display: flex;
    gap: 7px;
    margin: 13px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--v16-line);
    color: var(--v16-muted);
    font-size: 9px;
    line-height: 1.5;
}

html[data-ux-version="17"] .v17-rail-note svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

html[data-ux-version="17"] #view-directory .v17-person-list.grid {
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 10px;
    padding-top: 10px;
}

html[data-ux-version="17"] #view-directory .v17-person-list.grid .v17-person-row {
    min-height: 156px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
}

html[data-ux-version="17"] #view-directory .v17-person-list.grid .v17-person-open {
    grid-column: 2 / 4;
}

html[data-ux-version="17"] #view-directory .v17-person-list.grid .v17-person-relation {
    grid-column: 2;
}

html[data-ux-version="17"] #view-directory .v17-person-list.grid .v17-person-contact {
    grid-column: 2 / 4;
}

html[data-ux-version="17"] .v17-person-drawer,
html[data-ux-version="17"] .v17-finance-composer {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
}

html[data-ux-version="17"] .v17-person-drawer.active,
html[data-ux-version="17"] .v17-finance-composer.active {
    visibility: visible;
    pointer-events: auto;
}

html[data-ux-version="17"] .v17-drawer-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(26, 27, 25, .22);
    opacity: 0;
    transition: opacity .18s ease;
}

html[data-ux-version="17"] .active > .v17-drawer-scrim {
    opacity: 1;
}

html[data-ux-version="17"] .v17-person-drawer-panel,
html[data-ux-version="17"] .v17-finance-composer-panel {
    position: relative;
    z-index: 1;
    width: var(--v17-drawer);
    max-width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--v16-line);
    background: #fff;
    box-shadow: -20px 0 60px rgba(26, 27, 25, .15);
    transform: translateX(100%);
    transition: transform .22s ease;
}

html[data-ux-version="17"] .active > .v17-person-drawer-panel,
html[data-ux-version="17"] .active > .v17-finance-composer-panel {
    transform: translateX(0);
}

html[data-ux-version="17"] .v17-person-drawer-panel > header,
html[data-ux-version="17"] .v17-finance-composer-panel > header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v17-person-drawer-panel > header h2,
html[data-ux-version="17"] .v17-finance-composer-panel > header h2 {
    margin: 2px 0 0;
    font-size: 17px;
}

html[data-ux-version="17"] .v17-person-drawer-content,
html[data-ux-version="17"] .v17-finance-composer-body {
    min-height: 0;
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

html[data-ux-version="17"] .v17-person-hero {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v17-person-hero .contact-card-avatar {
    width: 54px;
    height: 54px;
    font-size: 15px;
}

html[data-ux-version="17"] .v17-person-hero h3,
html[data-ux-version="17"] .v17-person-hero p {
    margin: 0;
}

html[data-ux-version="17"] .v17-person-hero h3 {
    font-size: 17px;
}

html[data-ux-version="17"] .v17-person-hero p {
    margin-top: 3px;
    color: var(--v16-muted);
    font-size: 11px;
}

html[data-ux-version="17"] .v17-person-actions {
    display: flex;
    gap: 7px;
    padding: 16px 0;
}

html[data-ux-version="17"] .v17-person-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v17-person-details > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] .v17-person-details > div.wide {
    grid-column: 1 / -1;
}

html[data-ux-version="17"] .v17-person-details dt {
    color: var(--v16-muted);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html[data-ux-version="17"] .v17-person-details dd {
    min-width: 0;
    margin: 0;
    color: var(--v16-ink);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html[data-ux-version="17"] .v17-inline-success {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--v16-accent);
}

html[data-ux-version="17"] .v17-inline-success svg {
    width: 13px;
    height: 13px;
}

/* Finance */

html[data-ux-version="17"] #view-expenses .v17-finance-shell {
    min-width: 0;
}

html[data-ux-version="17"] #view-expenses .v17-finance-view-panel {
    min-width: 0;
}

html[data-ux-version="17"] #view-expenses .v17-finance-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 14px;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
    overflow: hidden;
}

html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block {
    min-height: 78px;
    padding: 12px 14px;
    border: 0;
    border-right: 1px solid var(--v16-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block:last-child {
    border-right: 0;
}

html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block strong {
    font-size: 18px;
    letter-spacing: -.03em;
}

html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block small {
    display: none;
}

html[data-ux-version="17"] #view-expenses .filter-bar {
    min-height: 58px;
    margin: 0 0 10px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-expenses .filter-bar-left {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: 9px;
}

html[data-ux-version="17"] #view-expenses .search-group label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

html[data-ux-version="17"] #view-expenses .search-group input {
    min-height: 38px;
    padding-left: 34px;
    background-image: none;
}

html[data-ux-version="17"] #view-expenses .search-group {
    position: relative;
}

html[data-ux-version="17"] #view-expenses .search-group::before {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--v16-muted);
    border-radius: 50%;
    pointer-events: none;
}

html[data-ux-version="17"] #view-expenses .search-group::after {
    content: "";
    position: absolute;
    left: 23px;
    bottom: 10px;
    width: 5px;
    height: 1.5px;
    background: var(--v16-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-menu {
    position: relative;
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-menu > summary {
    list-style: none;
    cursor: pointer;
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-menu > summary::-webkit-details-marker {
    display: none;
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-menu > summary svg:last-child {
    width: 12px;
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-popover {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 140;
    width: 310px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--v16-shadow);
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-popover .filter-group:first-child {
    grid-column: 1 / -1;
}

html[data-ux-version="17"] #view-expenses .v17-finance-filter-popover .btn {
    grid-column: 1 / -1;
}

html[data-ux-version="17"] #view-expenses .v17-ledger-panel,
html[data-ux-version="17"] #view-expenses .v17-review-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-expenses .v17-ledger-panel > .panel-heading,
html[data-ux-version="17"] #view-expenses .v17-review-panel > .panel-heading {
    min-height: 54px;
    padding: 7px 0 10px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-expenses .category-summary-box {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--v16-line);
    border-radius: 8px;
    background: #fafaf8;
}

html[data-ux-version="17"] #view-expenses .expense-list {
    display: grid;
    gap: 0;
}

html[data-ux-version="17"] #view-expenses .expense-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 3px;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-expenses .expense-row:hover {
    background: #fbfbf9;
}

html[data-ux-version="17"] #view-expenses .expense-row-main strong {
    font-size: 12px;
}

html[data-ux-version="17"] #view-expenses .expense-row-meta {
    margin-top: 4px;
}

html[data-ux-version="17"] #view-expenses .movement-amount {
    font-size: 12px;
}

html[data-ux-version="17"] #view-expenses .v17-review-panel {
    max-width: 820px;
}

html[data-ux-version="17"] #view-expenses .ocr-review-box {
    margin-top: 14px;
}

html[data-ux-version="17"] .v17-finance-composer-body .manual-expense-form {
    display: block;
    padding: 0;
    border: 0;
}

html[data-ux-version="17"] .v17-finance-composer-body .manual-expense-form > .panel-heading {
    display: none;
}

html[data-ux-version="17"] .v17-finance-composer-body .field-row {
    grid-template-columns: 1fr 1fr;
}

/* Reports */

html[data-ux-version="17"] #view-client-portal .v17-reports-shell {
    min-width: 0;
}

html[data-ux-version="17"] #view-client-portal .saved-reports-panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-client-portal .saved-reports-panel > .panel-heading {
    min-height: 56px;
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-client-portal .saved-reports-panel > .panel-heading input {
    min-height: 36px;
    border-radius: 7px;
}

html[data-ux-version="17"] #view-client-portal .saved-reports-list {
    display: grid;
    gap: 0;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(150px, .7fr) auto 38px;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-client-portal .v17-report-row:hover {
    background: #fbfbf9;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-open {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

html[data-ux-version="17"] #view-client-portal .v17-report-file-icon {
    width: 38px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--v16-line);
    border-radius: 6px;
    color: var(--v16-muted);
    background: #fff;
    box-shadow: 0 2px 5px rgba(20, 21, 19, .05);
}

html[data-ux-version="17"] #view-client-portal .v17-report-file-icon svg {
    width: 17px;
    height: 17px;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-copy strong,
html[data-ux-version="17"] #view-client-portal .v17-report-row-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-copy strong {
    font-size: 12px;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-copy small {
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-stats {
    display: flex;
    gap: 12px;
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] #view-client-portal .v17-report-row-stats strong {
    color: var(--v16-ink);
}

html[data-ux-version="17"] #view-client-portal .v17-report-builder-grid {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

html[data-ux-version="17"] #view-client-portal .v17-report-config {
    position: sticky;
    top: calc(var(--v16-topbar) + 16px);
}

html[data-ux-version="17"] #view-client-portal .report-toolbar {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
    border-radius: 9px;
    background: #fafaf8;
}

html[data-ux-version="17"] #view-client-portal .report-toolbar .field-row {
    grid-template-columns: 1fr;
    gap: 10px;
}

html[data-ux-version="17"] #view-client-portal .report-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

html[data-ux-version="17"] #view-client-portal .report-actions select {
    grid-column: 1 / -1;
}

html[data-ux-version="17"] #view-client-portal .v17-report-canvas {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #f4f4f1;
}

html[data-ux-version="17"] #view-client-portal .report-preview {
    min-width: 0;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 52px);
    border: 1px solid #e0e0db;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(29, 30, 27, .08);
}

html[data-ux-version="17"] #view-client-portal .v17-report-document-head {
    display: grid;
    gap: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--v16-ink);
}

html[data-ux-version="17"] #view-client-portal .v17-report-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

html[data-ux-version="17"] #view-client-portal .v17-report-brand > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    background: var(--v16-ink);
    font-size: 11px;
    font-weight: 750;
}

html[data-ux-version="17"] #view-client-portal .v17-report-brand small,
html[data-ux-version="17"] #view-client-portal .v17-report-document-head p,
html[data-ux-version="17"] #view-client-portal .v17-report-document-head > div > span {
    color: var(--v16-muted);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

html[data-ux-version="17"] #view-client-portal .v17-report-document-head p,
html[data-ux-version="17"] #view-client-portal .v17-report-document-head h2 {
    margin: 0;
}

html[data-ux-version="17"] #view-client-portal .v17-report-document-head h2 {
    margin: 6px 0 9px;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: -.045em;
}

html[data-ux-version="17"] #view-client-portal .report-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 26px 0;
    border-block: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-client-portal .report-metrics .metric-block {
    min-height: 82px;
    padding: 13px;
    border: 0;
    border-right: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-client-portal .report-metrics .metric-block:last-child {
    border-right: 0;
}

html[data-ux-version="17"] #view-client-portal .report-metrics .metric-block small {
    display: none;
}

html[data-ux-version="17"] #view-client-portal .report-preview .two-column {
    grid-template-columns: 1fr;
    gap: 14px;
}

html[data-ux-version="17"] #view-client-portal .report-preview .panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Integrations */

html[data-ux-version="17"] #view-integrations .v17-integration-panel {
    min-width: 0;
}

html[data-ux-version="17"] #view-integrations .v17-automation-heading,
html[data-ux-version="17"] #view-integrations .v17-connections-intro {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0 15px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-integrations .v17-automation-heading h3,
html[data-ux-version="17"] #view-integrations .v17-connections-intro h3,
html[data-ux-version="17"] #view-integrations .v17-automation-heading p,
html[data-ux-version="17"] #view-integrations .v17-connections-intro p {
    margin: 0;
}

html[data-ux-version="17"] #view-integrations .v17-automation-heading h3,
html[data-ux-version="17"] #view-integrations .v17-connections-intro h3 {
    margin: 3px 0 4px;
    font-size: 16px;
}

html[data-ux-version="17"] #view-integrations .v17-automation-heading p,
html[data-ux-version="17"] #view-integrations .v17-connections-intro p {
    max-width: 620px;
    color: var(--v16-muted);
    font-size: 10px;
}

html[data-ux-version="17"] #view-integrations .automation-list {
    display: grid;
    gap: 0;
}

html[data-ux-version="17"] #view-integrations .v17-automation-row {
    min-height: 76px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 3px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-integrations .v17-automation-status-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--v16-muted);
    background: var(--v16-soft-2);
}

html[data-ux-version="17"] #view-integrations .v17-automation-status-mark.success {
    color: var(--v16-accent);
    background: var(--v16-accent-soft);
}

html[data-ux-version="17"] #view-integrations .v17-automation-status-mark.warning {
    color: #946200;
    background: #fff7df;
}

html[data-ux-version="17"] #view-integrations .v17-automation-status-mark svg {
    width: 16px;
    height: 16px;
}

html[data-ux-version="17"] #view-integrations .v17-automation-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] #view-integrations .v17-automation-copy strong,
html[data-ux-version="17"] #view-integrations .v17-automation-copy small,
html[data-ux-version="17"] #view-integrations .v17-automation-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-integrations .v17-automation-copy strong {
    font-size: 12px;
}

html[data-ux-version="17"] #view-integrations .v17-automation-copy small,
html[data-ux-version="17"] #view-integrations .v17-automation-copy span {
    color: var(--v16-muted);
    font-size: 9px;
}

html[data-ux-version="17"] #view-integrations .v17-automation-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

html[data-ux-version="17"] #view-integrations .automation-run-timeline {
    grid-column: 2 / -1;
    margin-top: 3px;
}

html[data-ux-version="17"] #view-integrations .v17-automation-empty,
html[data-ux-version="17"] #view-client-portal .v17-reports-empty {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}

html[data-ux-version="17"] .v17-empty-illustration {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border: 1px solid var(--v16-line);
    border-radius: 14px;
    color: var(--v16-muted);
    background: var(--v16-soft);
}

html[data-ux-version="17"] .v17-empty-illustration svg {
    width: 22px;
    height: 22px;
}

html[data-ux-version="17"] #view-integrations .v17-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--v16-accent);
    background: var(--v16-accent-soft);
    font-size: 9px;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-integrations .v17-info-chip svg {
    width: 13px;
    height: 13px;
}

html[data-ux-version="17"] #view-integrations .v17-connections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
}

html[data-ux-version="17"] #view-integrations .v17-connection-row {
    min-height: 70px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-integrations .v17-connection-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--v16-line);
    border-radius: 9px;
    color: var(--v16-muted);
    background: #fff;
}

html[data-ux-version="17"] #view-integrations .v17-connection-icon svg {
    width: 16px;
    height: 16px;
}

html[data-ux-version="17"] #view-integrations .v17-connection-row > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

html[data-ux-version="17"] #view-integrations .v17-connection-row strong {
    font-size: 12px;
}

html[data-ux-version="17"] #view-integrations .v17-connection-row small {
    color: var(--v16-muted);
    font-size: 9px;
}

html[data-ux-version="17"] #view-integrations .v17-connection-state {
    padding: 5px 7px;
    border-radius: 999px;
    color: var(--v16-muted);
    background: var(--v16-soft-2);
    font-size: 9px;
}

html[data-ux-version="17"] #view-integrations .v17-connection-state.ready {
    color: var(--v16-accent);
    background: var(--v16-accent-soft);
}

/* Settings */

html[data-ux-version="17"] #view-settings .v17-settings-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

html[data-ux-version="17"] #view-settings [data-settings-category="general"],
html[data-ux-version="17"] #view-settings [data-settings-category="appearance"],
html[data-ux-version="17"] #view-settings [data-settings-category="team"],
html[data-ux-version="17"] #view-settings [data-settings-category="notifications"],
html[data-ux-version="17"] #view-settings [data-settings-category="memory"],
html[data-ux-version="17"] #view-settings [data-settings-category="plan"],
html[data-ux-version="17"] #view-settings [data-settings-category="ai"] {
    min-width: 0;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav {
    position: sticky;
    top: calc(var(--v16-topbar) + 16px);
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--v16-line);
    border-radius: 10px;
    background: #fafaf8;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav-heading {
    margin-bottom: 6px;
    padding: 4px 4px 12px;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav > button {
    min-height: 48px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    color: var(--v16-muted);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav > button:hover,
html[data-ux-version="17"] #view-settings .v17-settings-nav > button.active {
    color: var(--v16-ink);
    background: #fff;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav > button.active {
    box-shadow: 0 1px 4px rgba(25, 26, 24, .08);
}

html[data-ux-version="17"] #view-settings .v17-settings-nav > button > svg {
    width: 15px;
    height: 15px;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav > button > svg:last-child {
    width: 13px;
    height: 13px;
    opacity: .5;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav button > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav button strong {
    font-size: 11px;
}

html[data-ux-version="17"] #view-settings .v17-settings-nav button small {
    overflow: hidden;
    color: var(--v16-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-settings .v17-settings-content {
    min-width: 0;
    max-width: 880px;
}

html[data-ux-version="17"] #view-settings .v17-settings-section-head {
    padding: 3px 2px 14px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-settings .v17-settings-section-head h2 {
    margin: 3px 0 0;
    font-size: 20px;
    letter-spacing: -.03em;
}

html[data-ux-version="17"] #view-settings .v17-settings-back {
    display: none;
}

html[data-ux-version="17"] #view-settings .v17-settings-section-panels {
    display: grid;
    gap: 0;
}

html[data-ux-version="17"] #view-settings .v17-settings-card {
    margin: 0;
    padding: 20px 2px !important;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-settings .v17-settings-card .panel-heading {
    align-items: flex-start;
}

html[data-ux-version="17"] #view-settings .v17-settings-scope {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--v16-muted);
    background: var(--v16-soft-2);
    font-size: 8px;
    font-weight: 680;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html[data-ux-version="17"] #view-settings .v17-settings-card[data-settings-scope="Personal"] .v17-settings-scope {
    color: var(--v16-accent);
    background: var(--v16-accent-soft);
}

html[data-ux-version="17"] #view-settings .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-ux-version="17"] #view-settings #ai-usage-list,
html[data-ux-version="17"] #view-settings #agent-operations-list {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

/* Trash */

html[data-ux-version="17"] #view-trash .trash-toolbar {
    min-height: 54px;
    margin: 0;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid var(--v16-line);
    border-radius: 0;
    box-shadow: none;
}

html[data-ux-version="17"] #view-trash .v17-trash-danger-menu .v17-action-popover > p {
    margin: 2px 7px 4px;
    color: #b42318;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

html[data-ux-version="17"] #view-trash .trash-list {
    display: grid;
    gap: 0;
}

html[data-ux-version="17"] #view-trash .v17-trash-table-head,
html[data-ux-version="17"] #view-trash .v17-trash-row {
    display: grid;
    grid-template-columns: 34px minmax(210px, 1.3fr) 86px minmax(130px, .7fr) 150px auto;
    align-items: center;
    gap: 10px;
}

html[data-ux-version="17"] #view-trash .v17-trash-table-head {
    grid-template-columns: minmax(254px, 1.3fr) 86px minmax(130px, .7fr) 150px auto;
    min-height: 38px;
    padding: 0 5px;
    border-bottom: 1px solid var(--v16-line);
    color: var(--v16-muted);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html[data-ux-version="17"] #view-trash .v17-trash-row {
    min-height: 64px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--v16-line);
}

html[data-ux-version="17"] #view-trash .v17-trash-row:hover {
    background: #fbfbf9;
}

html[data-ux-version="17"] #view-trash .v17-trash-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-ux-version="17"] #view-trash .v17-trash-name strong,
html[data-ux-version="17"] #view-trash .v17-trash-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ux-version="17"] #view-trash .v17-trash-name strong {
    font-size: 12px;
}

html[data-ux-version="17"] #view-trash .v17-trash-name small,
html[data-ux-version="17"] #view-trash .v17-trash-project,
html[data-ux-version="17"] #view-trash time {
    color: var(--v16-muted);
    font-size: 9px;
}

html[data-ux-version="17"] #view-trash .v17-trash-type {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--v16-muted);
    background: var(--v16-soft-2);
    font-size: 9px;
}

html[data-ux-version="17"] #view-trash .v17-trash-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

html[data-ux-version="17"] #view-trash .v17-trash-empty {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

html[data-ux-version="17"] body.v17-trash-busy #view-trash button {
    opacity: .55;
    pointer-events: none;
}

/* Compact desktop/tablet composition keeps primary actions reachable. */
@media (min-width: 761px) and (max-width: 1200px) {
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-table-head,
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-row {
        grid-template-columns: minmax(180px, 1fr) minmax(110px, .7fr) 46px;
    }

    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-table-head > :nth-child(3),
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-table-head > :nth-child(4),
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-table-head > :nth-child(5),
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-row > :nth-child(3),
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-row > :nth-child(4),
    html[data-ux-version="17"] #view-capture .file-list:not(.grid) .file-row > :nth-child(5) {
        display: none !important;
    }

    html[data-ux-version="17"] #view-capture .file-results-pane {
        overflow: visible;
    }

    html[data-ux-version="17"] #view-directory .v17-directory-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-ux-version="17"] #view-directory .v17-directory-rail {
        display: none;
    }

    html[data-ux-version="17"] #view-directory .v17-person-row {
        grid-template-columns: 22px minmax(180px, 1fr) 90px minmax(130px, .75fr) auto;
    }
}

@media (min-width: 761px) and (max-width: 1000px) {
    html[data-ux-version="17"] #view-directory .v17-person-row {
        grid-template-columns: 22px minmax(180px, 1fr) 90px auto;
    }

    html[data-ux-version="17"] #view-directory .v17-person-contact {
        display: none;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-builder-grid {
        grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    }
}

/* Dedicated touch compositions. These are intentionally not desktop stacks. */
@media (max-width: 760px) {
    html[data-ux-version="17"] body {
        overflow-x: hidden;
    }

    html[data-ux-version="17"] #view-capture,
    html[data-ux-version="17"] #view-directory,
    html[data-ux-version="17"] #view-expenses,
    html[data-ux-version="17"] #view-client-portal,
    html[data-ux-version="17"] #view-integrations,
    html[data-ux-version="17"] #view-settings,
    html[data-ux-version="17"] #view-trash {
        min-width: 0;
        max-width: 100%;
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
        overflow-x: hidden;
    }

    html[data-ux-version="17"] #view-capture > .page-title-row,
    html[data-ux-version="17"] #view-directory > .page-title-row,
    html[data-ux-version="17"] #view-expenses > .page-title-row,
    html[data-ux-version="17"] #view-client-portal > .page-title-row,
    html[data-ux-version="17"] #view-integrations > .page-title-row,
    html[data-ux-version="17"] #view-settings > .page-title-row,
    html[data-ux-version="17"] #view-trash > .page-title-row {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 12px;
        padding: 2px 0 10px;
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] #view-capture > .page-title-row,
    html[data-ux-version="17"] #view-directory > .page-title-row,
    html[data-ux-version="17"] #view-expenses > .page-title-row,
    html[data-ux-version="17"] #view-client-portal > .page-title-row,
    html[data-ux-version="17"] #view-trash > .page-title-row {
        min-height: 46px;
        justify-content: flex-end;
        margin-bottom: 8px;
        padding: 0 0 6px;
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] #view-capture > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-directory > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-expenses > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-client-portal > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-trash > .page-title-row > div:first-child {
        display: none;
    }

    html[data-ux-version="17"] #view-integrations > .page-title-row,
    html[data-ux-version="17"] #view-settings > .page-title-row {
        display: none !important;
    }

    html[data-ux-version="17"] #view-capture > .page-title-row .page-actions,
    html[data-ux-version="17"] #view-expenses > .page-title-row .page-actions,
    html[data-ux-version="17"] #view-client-portal > .page-title-row .page-actions {
        width: auto !important;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-end;
        gap: 6px;
        margin-left: auto;
    }

    html[data-ux-version="17"] #view-directory > .page-title-row > button,
    html[data-ux-version="17"] #view-trash > .page-title-row > details {
        margin-left: auto;
    }

    html[data-ux-version="17"] #view-capture > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-directory > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-expenses > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-client-portal > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-integrations > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-settings > .page-title-row > div:first-child,
    html[data-ux-version="17"] #view-trash > .page-title-row > div:first-child {
        min-width: 0;
        flex: 1;
    }

    html[data-ux-version="17"] #view-capture > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-capture > .page-title-row .section-description,
    html[data-ux-version="17"] #view-directory > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-directory > .page-title-row .section-description,
    html[data-ux-version="17"] #view-expenses > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-expenses > .page-title-row .section-description,
    html[data-ux-version="17"] #view-client-portal > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-client-portal > .page-title-row .section-description,
    html[data-ux-version="17"] #view-integrations > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-integrations > .page-title-row .section-description,
    html[data-ux-version="17"] #view-settings > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-settings > .page-title-row .section-description,
    html[data-ux-version="17"] #view-trash > .page-title-row .eyebrow,
    html[data-ux-version="17"] #view-trash > .page-title-row .section-description {
        display: none;
    }

    html[data-ux-version="17"] #view-capture > .page-title-row h2,
    html[data-ux-version="17"] #view-directory > .page-title-row h2,
    html[data-ux-version="17"] #view-expenses > .page-title-row h2,
    html[data-ux-version="17"] #view-client-portal > .page-title-row h2,
    html[data-ux-version="17"] #view-integrations > .page-title-row h2,
    html[data-ux-version="17"] #view-settings > .page-title-row h2,
    html[data-ux-version="17"] #view-trash > .page-title-row h2 {
        margin: 0;
        font-size: 22px;
        letter-spacing: -.04em;
    }

    html[data-ux-version="17"] .v17-action-popover {
        position: fixed;
        inset: auto 8px calc(74px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(420px, calc(100dvh - 110px));
        overflow-y: auto;
        border-radius: 12px;
    }

    html[data-ux-version="17"] .more-menu-groups {
        max-height: calc(100dvh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html[data-ux-version="17"] .more-menu-section .more-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html[data-ux-version="17"] .more-menu-section .more-menu-grid a {
        min-width: 0;
        min-height: 68px;
        padding: 8px 4px;
        font-size: 10px;
    }

    /* Files: own header, horizontal smart views and sheets. */
    html[data-ux-version="17"] #view-capture .page-actions .v17-files-ai {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .page-actions .v17-add-menu > summary {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 10px;
    }

    html[data-ux-version="17"] #view-capture .page-actions .v17-add-menu > summary svg:first-child {
        width: 18px;
        height: 18px;
    }

    html[data-ux-version="17"] #view-capture .page-actions .v17-add-menu > summary svg:last-child {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .file-library-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html[data-ux-version="17"] #view-capture .v17-file-smart-tabs {
        min-width: 0;
        min-height: 42px;
        gap: 3px;
        margin-inline: -2px;
        padding: 2px 0 7px;
        overflow-x: auto;
        border: 0;
        scrollbar-width: none;
    }

    html[data-ux-version="17"] #view-capture .v17-file-smart-tabs button {
        min-width: max-content;
        min-height: 34px;
        border-radius: 999px;
        background: var(--v16-soft);
    }

    html[data-ux-version="17"] #view-capture .v17-file-smart-tabs button.active {
        color: #fff;
        background: var(--v16-ink);
        box-shadow: none;
    }

    html[data-ux-version="17"] #view-capture .file-library-topbar {
        grid-template-columns: minmax(0, 1fr) 42px 42px 76px;
        gap: 6px;
        padding: 4px 0 10px;
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] #view-capture .file-search-box {
        min-width: 0;
        grid-column: auto !important;
    }

    html[data-ux-version="17"] #view-capture .file-mobile-control {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        font-size: 0;
    }

    html[data-ux-version="17"] #view-capture .v17-file-filter-menu {
        position: static;
        display: contents;
    }

    html[data-ux-version="17"] #view-capture .v17-file-filter-menu > summary {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .drive-view-toggle {
        width: 76px;
        min-width: 76px;
        align-self: center;
    }

    html[data-ux-version="17"] #view-capture .drive-view-toggle .view-toggle-btn {
        min-width: 34px;
        width: 34px;
        height: 34px;
    }

    html[data-ux-version="17"] #view-capture .v17-file-filter-menu .file-filter-panel {
        position: fixed;
        inset: auto 0 0;
        z-index: 470;
        width: 100%;
        max-height: min(72dvh, 560px);
        display: grid;
        gap: 10px;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -20px 55px rgba(25, 26, 24, .18);
    }

    html[data-ux-version="17"] #view-capture .v17-file-filter-menu .file-mobile-panel-head {
        display: flex;
    }

    html[data-ux-version="17"] #view-capture .file-library-shell {
        min-width: 0;
        min-height: auto;
        display: block;
    }

    html[data-ux-version="17"] #view-capture .file-nav-pane {
        display: none !important;
        position: fixed;
        inset: 0 0 0 12%;
        z-index: 470;
        max-height: 100dvh;
        padding: max(14px, env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border: 0;
        background: #fff;
        box-shadow: -20px 0 50px rgba(25, 26, 24, .2);
    }

    html[data-ux-version="17"] #view-capture[data-mobile-panel="nav"] .file-nav-pane {
        display: block !important;
    }

    html[data-ux-version="17"] #view-capture .file-nav-pane .file-mobile-panel-head button {
        display: grid;
    }

    html[data-ux-version="17"] #view-capture .file-results-pane {
        min-width: 0;
        padding: 0;
    }

    html[data-ux-version="17"] #view-capture .file-results-head {
        min-height: 50px;
        padding: 8px 1px;
    }

    html[data-ux-version="17"] #view-capture .transfer-summary {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .file-table-head {
        display: none;
    }

    html[data-ux-version="17"] #view-capture .file-list,
    html[data-ux-version="17"] #view-capture .file-list.grid {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    html[data-ux-version="17"] #view-capture .file-list .file-row,
    html[data-ux-version="17"] #view-capture .file-list.grid .file-row {
        min-width: 0;
        min-height: 68px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 8px 1px;
        border: 0;
        border-bottom: 1px solid var(--v16-line);
        border-radius: 0;
    }

    html[data-ux-version="17"] #view-capture .file-list.grid .file-row-main {
        align-items: center;
    }

    html[data-ux-version="17"] #view-capture .file-list.grid .file-cell-location,
    html[data-ux-version="17"] #view-capture .file-cell-location,
    html[data-ux-version="17"] #view-capture .file-cell-tags,
    html[data-ux-version="17"] #view-capture .file-cell-size,
    html[data-ux-version="17"] #view-capture .file-cell-date,
    html[data-ux-version="17"] #view-capture .file-quick-action {
        display: none !important;
    }

    html[data-ux-version="17"] #view-capture .file-list.grid .file-actions {
        position: static;
    }

    html[data-ux-version="17"] #view-capture .file-preview-dialog {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        border: 0;
    }

    /* People: list rows and a native full-screen record. */
    html[data-ux-version="17"] #view-directory .page-title-row > button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 10px;
    }

    html[data-ux-version="17"] #view-directory .page-title-row > button svg {
        width: 18px;
        height: 18px;
    }

    html[data-ux-version="17"] #view-directory .v17-directory-shell {
        min-width: 0;
        display: block;
    }

    html[data-ux-version="17"] #view-directory .v17-directory-rail {
        display: none;
    }

    html[data-ux-version="17"] #view-directory .v17-directory-tabs {
        min-width: 0;
        gap: 4px;
        padding: 0 0 8px;
        overflow-x: auto;
        border: 0;
        scrollbar-width: none;
    }

    html[data-ux-version="17"] #view-directory .v17-directory-tabs button {
        min-width: max-content;
        border-radius: 999px;
        background: var(--v16-soft);
    }

    html[data-ux-version="17"] #view-directory .v17-directory-tabs button.active {
        color: #fff;
        background: var(--v16-ink);
    }

    html[data-ux-version="17"] #view-directory .directory-toolbar {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 4px 0 8px;
    }

    html[data-ux-version="17"] #view-directory #directory-result-count {
        grid-row: 2;
        grid-column: 1 / -1;
        padding-left: 1px;
    }

    html[data-ux-version="17"] #view-directory .v17-directory-view-switch {
        display: none;
    }

    html[data-ux-version="17"] #view-directory .v17-person-list,
    html[data-ux-version="17"] #view-directory .v17-person-list.grid {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    html[data-ux-version="17"] #view-directory .v17-person-row,
    html[data-ux-version="17"] #view-directory .v17-person-list.grid .v17-person-row {
        min-width: 0;
        min-height: 70px;
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        gap: 7px;
        padding: 8px 1px;
        border: 0;
        border-bottom: 1px solid var(--v16-line);
        border-radius: 0;
    }

    html[data-ux-version="17"] #view-directory .v17-person-list.grid .v17-person-open {
        grid-column: auto;
    }

    html[data-ux-version="17"] #view-directory .v17-person-relation,
    html[data-ux-version="17"] #view-directory .v17-person-contact,
    html[data-ux-version="17"] #view-directory .v17-access-state {
        display: none;
    }

    html[data-ux-version="17"] .v17-person-drawer-panel,
    html[data-ux-version="17"] .v17-finance-composer-panel {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        border: 0;
    }

    html[data-ux-version="17"] .v17-person-drawer > .v17-drawer-scrim,
    html[data-ux-version="17"] .v17-finance-composer > .v17-drawer-scrim {
        display: none;
    }

    html[data-ux-version="17"] .v17-person-drawer-content,
    html[data-ux-version="17"] .v17-finance-composer-body {
        padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
    }

    html[data-ux-version="17"] .v17-person-details {
        grid-template-columns: 1fr;
    }

    /* Finance: summary, ledger and composer are separate touch surfaces. */
    html[data-ux-version="17"] #view-expenses .page-actions .v17-action-menu > summary {
        width: 42px;
        height: 42px;
    }

    html[data-ux-version="17"] #view-expenses .page-actions > .btn.primary {
        width: 42px !important;
        min-width: 42px;
        height: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 10px;
    }

    html[data-ux-version="17"] #view-expenses .v17-section-tabs {
        min-width: 0;
        margin-bottom: 12px;
        overflow-x: auto;
    }

    html[data-ux-version="17"] #view-expenses .v17-finance-summary {
        min-width: 0;
        grid-template-columns: 1fr 1fr;
        border-radius: 9px;
    }

    html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block {
        min-width: 0;
        min-height: 70px;
        border-right: 1px solid var(--v16-line);
        border-bottom: 1px solid var(--v16-line);
    }

    html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block:nth-child(2n) {
        border-right: 0;
    }

    html[data-ux-version="17"] #view-expenses .v17-finance-summary .metric-block:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    html[data-ux-version="17"] #view-expenses .filter-bar-left {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    html[data-ux-version="17"] #view-expenses .v17-finance-filter-popover {
        position: fixed;
        inset: auto 0 0;
        z-index: 470;
        width: 100%;
        max-height: 72dvh;
        grid-template-columns: 1fr;
        padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border: 0;
        border-radius: 16px 16px 0 0;
    }

    html[data-ux-version="17"] #view-expenses .expense-row {
        min-width: 0;
        min-height: 72px;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        gap: 7px;
    }

    html[data-ux-version="17"] #view-expenses .expense-row-meta span:nth-child(n + 4):not(.expense-status) {
        display: none;
    }

    html[data-ux-version="17"] #view-expenses .expense-row-actions {
        align-items: flex-end;
    }

    html[data-ux-version="17"] #view-expenses .movement-amount {
        margin: 0 !important;
        font-size: 11px;
    }

    html[data-ux-version="17"] #view-expenses .category-summary-box {
        max-height: 210px;
        overflow-y: auto;
    }

    html[data-ux-version="17"] #view-expenses .v17-review-panel,
    html[data-ux-version="17"] #view-expenses .ocr-ticket-preview {
        min-width: 0;
        max-width: 100%;
    }

    html[data-ux-version="17"] .v17-finance-composer-body .field-row {
        grid-template-columns: 1fr;
    }

    /* Reports: library first; editor becomes one readable page. */
    html[data-ux-version="17"] #view-client-portal .page-actions .btn {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 10px;
    }

    html[data-ux-version="17"] #view-client-portal .page-actions .btn.secondary {
        width: 42px;
        min-width: 42px;
        padding: 0;
        font-size: 0;
    }

    html[data-ux-version="17"] #view-client-portal .page-actions .btn.primary {
        width: auto;
        flex: 0 0 auto;
    }

    html[data-ux-version="17"] #view-client-portal .v17-section-tabs {
        min-width: 0;
        margin-bottom: 12px;
        overflow-x: auto;
    }

    html[data-ux-version="17"] #view-client-portal .saved-reports-panel > .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    html[data-ux-version="17"] #view-client-portal .saved-reports-panel > .panel-heading input {
        width: 100%;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-row {
        min-width: 0;
        min-height: 78px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px 1px;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-row-stats {
        grid-column: 1;
        padding-left: 49px;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-row > .status-pill {
        grid-column: 2;
        grid-row: 1;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-row > .row-actions-menu {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-builder-grid {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-config {
        position: static;
    }

    html[data-ux-version="17"] #view-client-portal .report-toolbar {
        min-width: 0;
        padding: 13px;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-canvas {
        min-width: 0;
        padding: 0;
        border: 0;
        background: #fff;
    }

    html[data-ux-version="17"] #view-client-portal .report-preview {
        min-width: 0;
        max-width: 100%;
        padding: 18px 14px;
        border-radius: 8px;
        box-shadow: none;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-document-head {
        gap: 20px;
        padding-bottom: 20px;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-document-head h2 {
        font-size: 25px;
    }

    html[data-ux-version="17"] #view-client-portal .report-metrics {
        grid-template-columns: 1fr 1fr;
    }

    html[data-ux-version="17"] #view-client-portal .report-metrics .metric-block:nth-child(2) {
        border-right: 0;
    }

    /* Integrations: actionable automations and catalog never share columns. */
    html[data-ux-version="17"] #view-integrations .v17-section-tabs {
        min-width: 0;
        margin-bottom: 10px;
        overflow-x: auto;
    }

    html[data-ux-version="17"] #view-integrations .v17-automation-heading,
    html[data-ux-version="17"] #view-integrations .v17-connections-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    html[data-ux-version="17"] #view-integrations .v17-automation-heading .btn {
        width: 100%;
    }

    html[data-ux-version="17"] #view-integrations .v17-automation-row {
        min-width: 0;
        min-height: 106px;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
    }

    html[data-ux-version="17"] #view-integrations .v17-automation-copy {
        padding-top: 2px;
    }

    html[data-ux-version="17"] #view-integrations .v17-automation-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }

    html[data-ux-version="17"] #view-integrations .automation-run-timeline {
        grid-column: 1 / -1;
    }

    html[data-ux-version="17"] #view-integrations .v17-connections-grid {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 0;
    }

    html[data-ux-version="17"] #view-integrations .v17-connection-row {
        min-width: 0;
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    /* Settings: categories are touch navigation, one category is visible. */
    html[data-ux-version="17"] #view-settings .v17-settings-shell {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-nav {
        position: static;
        min-width: 0;
        display: flex;
        gap: 6px;
        padding: 0 0 8px;
        overflow-x: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        scrollbar-width: none;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-nav-heading {
        display: none;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-nav > button {
        min-width: max-content;
        min-height: 42px;
        grid-template-columns: 17px auto;
        padding: 6px 10px;
        border: 1px solid var(--v16-line);
        border-radius: 999px;
        background: #fff;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-nav > button.active {
        color: #fff;
        background: var(--v16-ink);
        border-color: var(--v16-ink);
    }

    html[data-ux-version="17"] #view-settings .v17-settings-nav > button small,
    html[data-ux-version="17"] #view-settings .v17-settings-nav > button > svg:last-child {
        display: none;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-content,
    html[data-ux-version="17"] #view-settings .v17-settings-section,
    html[data-ux-version="17"] #view-settings .v17-settings-section-panels,
    html[data-ux-version="17"] #view-settings .v17-settings-card {
        min-width: 0;
        max-width: 100%;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-section-head {
        padding-bottom: 10px;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-section-head h2 {
        font-size: 19px;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-card {
        padding: 16px 0 !important;
        overflow-x: hidden;
    }

    html[data-ux-version="17"] #view-settings .v17-settings-card .panel-heading {
        min-width: 0;
        gap: 8px;
    }

    html[data-ux-version="17"] #view-settings .settings-grid,
    html[data-ux-version="17"] #view-settings .ai-operations-filters {
        min-width: 0;
        grid-template-columns: 1fr;
    }

    html[data-ux-version="17"] #view-settings #ai-usage-list,
    html[data-ux-version="17"] #view-settings #agent-operations-list {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
    }

    html[data-ux-version="17"] #view-settings #ai-usage-list table,
    html[data-ux-version="17"] #view-settings #agent-operations-list table {
        min-width: 620px;
    }

    /* Trash: restore stays visible; deletion is behind the menu. */
    html[data-ux-version="17"] #view-trash .trash-toolbar {
        min-width: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-table-head {
        display: none;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-row {
        min-width: 0;
        min-height: 82px;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 1px;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-type,
    html[data-ux-version="17"] #view-trash .v17-trash-project,
    html[data-ux-version="17"] #view-trash time {
        grid-column: 2;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-type {
        display: none;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-project,
    html[data-ux-version="17"] #view-trash time {
        display: inline;
        white-space: nowrap;
    }

    html[data-ux-version="17"] #view-trash time::before {
        content: " · ";
    }

    html[data-ux-version="17"] #view-trash .v17-trash-actions {
        grid-column: 3;
        grid-row: 1 / 4;
        align-self: center;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-actions .btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        font-size: 0;
    }

    html[data-ux-version="17"] #view-trash .v17-trash-empty {
        min-height: 50dvh;
    }
}

@media (pointer: coarse) {
    html[data-ux-version="17"] #view-capture button,
    html[data-ux-version="17"] #view-directory button,
    html[data-ux-version="17"] #view-expenses button,
    html[data-ux-version="17"] #view-client-portal button,
    html[data-ux-version="17"] #view-integrations button,
    html[data-ux-version="17"] #view-settings button,
    html[data-ux-version="17"] #view-trash button,
    html[data-ux-version="17"] .v17-person-actions a {
        min-height: 44px;
    }
}

@media print {
    html[data-ux-version="17"] .v17-section-tabs,
    html[data-ux-version="17"] .v17-action-menu,
    html[data-ux-version="17"] #view-client-portal .v17-report-config,
    html[data-ux-version="17"] #view-client-portal > .page-title-row {
        display: none !important;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-builder-grid {
        display: block;
    }

    html[data-ux-version="17"] #view-client-portal .v17-report-canvas,
    html[data-ux-version="17"] #view-client-portal .report-preview {
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}