/* Desktop workspace. The same navigation, renderers, permissions and controls are
   used at every width; the mobile layout remains in app.css. */
.app-sidebar { display: contents; }
.desktop-brand, .desktop-workspace, .desktop-account, .desktop-topbar { display: none; }
.task-card-description { display: none; }
.task-detail-info, .task-detail-main { min-width: 0; }

@media (min-width: 1024px) {
  :root {
    --desktop-sidebar: 230px;
    --desktop-header: 72px;
    --desktop-space: 32px;
    --background: #f5f7fb;
    --foreground: #1c2940;
    --card-foreground: #1c2940;
    --muted-foreground: #6c7b92;
    --border-c: #e2e8f1;
    --input-c: #dce3ed;
    --secondary: #eef2f8;
    --secondary-foreground: #394b64;
    --muted-surface: #eef2f8;
    --accent: #edf3ff;
    --accent-foreground: #2357c5;
    --chat-bg: #f3f6fb;
  }
  html.dark {
    --background: #111827;
    --foreground: #e5edf8;
    --card-bg: #192335;
    --card-foreground: #e5edf8;
    --popover: #1d293e;
    --popover-foreground: #e5edf8;
    --muted-foreground: #a2b0c6;
    --border-c: #2c3950;
    --input-c: #35435c;
    --secondary: #233047;
    --secondary-foreground: #d4dfef;
    --muted-surface: #202c41;
    --accent: #213657;
    --accent-foreground: #b1ceff;
    --chat-bg: #142033;
    --bubble-theirs: #202d42;
  }
  html, body { font-family: Vazirmatn, Tahoma, sans-serif; font-size: 14px; }
  .wrap:has(#tabbar:not(.hidden)) {
    max-width: none;
    margin: 0;
    margin-inline-start: var(--desktop-sidebar);
    padding: calc(var(--desktop-header) + 28px) var(--desktop-space) 44px;
    min-height: 100dvh;
  }
  #view { min-width: 0; }
  .app-sidebar:has(#tabbar:not(.hidden)), .wrap:has(.chat-screen) > .app-sidebar:has(#tabbar:not(.hidden)) {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--desktop-sidebar);
    display: flex;
    flex-direction: column;
    padding: 28px 16px 0;
    background: var(--card-bg);
    border-inline-end: 1px solid var(--border-c);
    z-index: 20;
  }
  .desktop-brand { display: flex; align-items: center; gap: 11px; padding: 0 9px; font-size: 22px;
    font-weight: 800; color: var(--foreground); text-decoration: none; }
  .desktop-brand small { display: block; margin-top: -1px; font-size: 10px; font-weight: 450;
    color: var(--muted-foreground); }
  .desktop-brand-mark { display: grid; place-items: center; width: 42px; height: 44px;
    flex: none; }
  .desktop-brand-mark img { width: 42px; height: 42px; display: block; }
  .desktop-workspace { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-c);
    border-radius: 11px; padding: 11px; margin: 28px 0 22px; font-weight: 600; font-size: 12px; }
  .desktop-workspace > span { display: grid; place-items: center; background: var(--secondary);
    border-radius: 8px; width: 32px; height: 34px; color: var(--muted-foreground); }
  .desktop-workspace small { display: block; font-size: 10px; font-weight: 400; color: var(--muted-foreground); }
  .app-sidebar .tabbar { position: static; display: flex; flex-direction: column; flex: 1 1 auto;
    min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px 20px; gap: 5px;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; scrollbar-width: thin; }
  .app-sidebar .tab { display: flex; gap: 11px; align-items: center; text-align: start;
    flex: none; width: 100%; padding: 11px 13px; border: 1px solid transparent;
    border-radius: 9px; color: var(--muted-foreground); background: transparent;
    box-shadow: none; font-size: 12.5px; font-weight: 500; min-height: 43px; }
  .app-sidebar .tab .ic { width: 19px; height: 19px; margin: 0; }
  .app-sidebar .tab:hover { background: var(--secondary); color: var(--foreground); }
  .app-sidebar .tab.active { background: var(--accent); color: var(--accent-foreground); font-weight: 700; }
  .app-sidebar .tab[data-tab-id="settings"] { margin-top: 15px; }
  .app-sidebar .tab-badge { margin-inline-start: auto; font-size: 10px; box-shadow: none; }
  .app-sidebar .tab-badge + .tab-badge { margin-inline-start: 0; }
  .app-sidebar .tab.active .tab-badge { background: var(--primary); color: var(--primary-foreground); }
  .app-sidebar .tab.active .tab-badge-schedule { background: #7c3aed; color: #fff; }
  .desktop-account { display: flex; flex: none; align-items: center; gap: 10px;
    border-top: 1px solid var(--border-c); padding: 18px 8px; font-size: 12px; }
  .desktop-account-avatar { display: grid; place-items: center; width: 33px; height: 33px;
    border-radius: 50%; background: var(--accent); color: var(--accent-foreground); flex: none; }
  .desktop-account-avatar svg { width: 17px; height: 17px; }
  #desktop-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-sidebar:has(.auth-header) .desktop-account { display: none; }
  .app-sidebar .auth-header { order: 3; flex: none; border-top: 1px solid var(--border-c);
    border-bottom: none; padding: 18px 4px; margin: 0; gap: 6px; }
  .app-sidebar .auth-header .who { font-size: 11px; }
  .app-sidebar .auth-header button { font-size: 11px; padding: 6px 9px; }
  .wrap:has(#tabbar:not(.hidden)) > .desktop-topbar,
  .wrap:has(.chat-screen):has(#tabbar:not(.hidden)) > .desktop-topbar {
    position: fixed; inset: 0 var(--desktop-sidebar) auto 0; height: var(--desktop-header);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 0 var(--desktop-space); padding-inline-end: 86px; background: var(--card-bg);
    border-bottom: 1px solid var(--border-c); z-index: 15;
  }
  .desktop-breadcrumb { display: flex; align-items: center; gap: 13px; font-size: 12px; }
  .desktop-breadcrumb > span:first-child, #desktop-date { color: var(--muted-foreground); }
  .desktop-breadcrumb > svg { width: 13px; height: 13px; color: var(--muted-foreground); }
  #desktop-current-section { font-weight: 650; }
  #desktop-date { font-size: 11px; }
  .theme-fab { top: 17px; bottom: auto; left: 24px; width: 37px; height: 37px;
    border-radius: 11px; z-index: 21; box-shadow: none; }
  body:has(.chat-screen) .theme-fab { display: flex; }

  /* The sidebar and breadcrumb already identify the page. Keep tour buttons
     available without repeating a large title or adding decorative subtitles. */
  #view > h1, #view > .spread h1 { font-size: 0; line-height: 0; margin: 0; }
  #view > h1 > .ic, #view > .spread h1 > .ic { display: none; }
  #view h1 .help-btn { font-size: 12px; line-height: 1.5; vertical-align: middle; }
  #view > h1:not(:has(.help-btn)) { height: 0; overflow: hidden; }
  #view > .spread:has(h1) { min-height: 34px; margin-bottom: 22px; }
  #view > .spread h1 .help-btn { margin: 0; }
  .mr-page-head > div > .muted { display: none; }
  h2 { font-size: 13px; font-weight: 650; margin: 24px 0 14px; color: var(--foreground); }
  button { font-family: inherit; border-radius: 9px; font-weight: 550; }
  button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 65%, transparent);
    outline-offset: 3px; }
  .card { padding: 21px; border-radius: 13px; margin-bottom: 16px; box-shadow: 0 1px 3px #12254303; }
  input.f, textarea.f, select.f { border-radius: 9px; padding: 10px 12px; }
  .fbar { gap: 12px; margin: 0 0 23px; }
  #tf-q { flex: 2 1 280px !important; }
  #tf-owner, #tf-requester { flex: 1 1 190px !important; }
  .fbar > .pp { flex: 1 1 190px !important; }
  #tf-count { padding-top: 2px; font-size: 11px; }
  .cardlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
  .cardlist > .item { display: flex; flex-direction: column; min-width: 0; min-height: 215px;
    padding: 20px; border-radius: 13px; box-shadow: 0 2px 5px #12254303;
    transition: border-color .15s, box-shadow .15s, transform .15s; }
  .cardlist > .item:hover { transform: translateY(-2px); box-shadow: 0 7px 22px #12254308; }
  .cardlist > .item.review { padding-inline-start: 19px; }
  .cardlist .item .title { font-size: 14px; line-height: 1.9; font-weight: 650; }
  .cardlist .item .meta { font-size: 11px; line-height: 2.1; margin-top: 11px; }
  .cardlist .item .actions { margin-top: auto; padding-top: 17px; }
  .cardlist .item .actions button { font-size: 11px; padding: 6px 10px; }
  .cardlist .item-tools { opacity: .65; gap: 5px; }
  .cardlist .item:focus-within .item-tools { opacity: 1; }
  .task-card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 12px; line-height: 1.95; color: var(--muted-foreground); margin-top: 9px; }
  .cardlist .dlbar { margin-top: 14px; }
  #t-pend .cardlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #t-pend .cardlist > .item { border-color: var(--warn-bd); background: color-mix(in srgb, var(--warn-bg) 25%, var(--card-bg)); }
  .dash-grid, .ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .dash-grid .card, .ov-grid .card { margin-bottom: 0; }
  .dash-grid .dnum { font-size: 32px; }
  .gantt-row { grid-template-columns: minmax(160px, 22%) 1fr; padding: 10px 0; }
  .gantt-name { font-size: 12px; }
  .gantt-track { height: 20px; }
  .gantt-bar { height: 16px; }

  /* Task content is primary; conversation occupies a compact side column.
     Project sections keep a full-width workspace below their description. */
  #d-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr); gap: 24px; align-items: start; }
  .task-detail-info { position: static; }
  .task-detail-info .dt-title { font-size: 20px; line-height: 1.9; }
  .task-detail-info .card { position: relative; }
  .task-detail-info .task-description-card { background: var(--card-bg) !important; padding: 26px; }
  .task-description-card > div { font-size: 15px; line-height: 2.2; margin-top: 12px !important; }
  .task-detail-info .actions { flex-wrap: wrap; }
  .task-detail-info .actions > button { flex: 0 1 auto; padding-inline: 18px; }
  .task-detail-main { position: sticky; top: calc(var(--desktop-header) + 24px); }
  .task-detail-main > h2:first-child { margin-top: 0; }
  .task-detail-main .chatpane { background: var(--card-bg); border: 1px solid var(--border-c); border-radius: 13px; padding: 12px; }
  .task-detail-main .chat-scroll { min-height: 200px; height: clamp(200px, 32dvh, 340px); max-height: none; }
  .task-detail-main .section { margin-top: 0; }
  .task-detail-main .sec-head { padding: 15px; }
  .task-detail-info .card-tools { opacity: .8; }
  #d-body:has(#d-sections) { grid-template-columns: minmax(0, 1fr); }
  #d-body:has(#d-sections) .task-detail-main { position: static; }
  #view:has(#te-title) > .card, #view:has(#mr-title) > .card { max-width: 1050px; margin-inline: auto; }
  #te-desc { min-height: 120px !important; }
  #view:has(#te-title) > .card { padding: 28px; }
  #view:has(#te-title) > .card > .row:last-child { border-top: 1px solid var(--border-c); padding-top: 20px; }
  #view > section[data-settings-cat]:not(.hidden) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  #view > section[data-settings-cat] > .card { margin: 0; min-width: 0; }
  .set-cats { width: min(650px, 100%); margin-bottom: 24px; }
  .set-cats button { padding: 10px 18px; }
  .mr-record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mr-record { margin: 0; min-width: 0; }
  .mr-record-meta { line-height: 2; }
  .arc-filters { gap: 10px; }
  .arc-text { max-height: 420px; }
  #pv-tabs { margin-bottom: 22px !important; }
  #pv-body > .card { padding: 24px; }
  .note-item { padding: 18px; }

  /* Chat must leave desktop navigation usable. Mobile visualViewport handling
     remains intact in chat.js and app.css. */
  .wrap:has(.chat-screen) { padding-top: calc(var(--desktop-header) + 24px); padding-bottom: 24px; }
  .chat-screen { position: relative; inset: auto; top: auto; height: calc(100dvh - var(--desktop-header) - 48px);
    min-height: 320px; background: var(--chat-bg); border: 1px solid var(--border-c); border-radius: 15px; z-index: 1; }
  .dark .chat-screen { background: var(--chat-bg); }
  .chat-head { min-height: 62px; padding: 10px 18px; }
  .chat-head-title { min-height: 1px; }
  .chat-head-title h1, .chat-head-title > span { position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chat-avatar { width: 35px; height: 35px; flex-basis: 35px; background: var(--accent); color: var(--primary); }
  .chat-screen .chat-log { padding: 26px clamp(22px, 5vw, 100px); gap: 18px; }
  .chat-screen .bubble { max-width: min(80%, 760px); padding: 14px 18px; line-height: 1.95; }
  .chat-composer { padding: 16px clamp(18px, 5vw, 100px); border-top: 1px solid var(--border-c); background: var(--card-bg); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --desktop-sidebar: 205px; --desktop-space: 24px; }
  .cardlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid, .ov-grid { gap: 12px; }
  .dash-grid .card, .ov-grid .card { padding: 16px; }
  #d-body { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 16px; }
  #view > section[data-settings-cat]:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1800px) {
  :root { --desktop-sidebar: 245px; --desktop-space: 44px; }
  .cardlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cardlist > .item { transition: none; }
  .cardlist > .item:hover { transform: none; }
}
.desktop-task-summary { display: none; }
@media (min-width: 1024px) {
  .desktop-task-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--card-bg); border: 1px solid var(--border-c); border-radius: 13px;
    padding: 20px 0; margin-bottom: 26px; }
  .desktop-task-summary > div { display: flex; align-items: center; gap: 14px;
    padding: 0 24px; border-inline-end: 1px solid var(--border-c); }
  .desktop-task-summary > div:last-child { border-inline-end: none; }
  .desktop-summary-icon { display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 11px; background: var(--accent); color: var(--primary); }
  .desktop-summary-icon .ic { width: 20px; height: 20px; margin: 0; }
  .desktop-summary-icon.pending { background: var(--warn-bg); color: var(--warn-fg); }
  .desktop-task-summary b { display: block; font-size: 25px; font-weight: 650; line-height: 1.3; }
  .desktop-task-summary small { display: block; color: var(--muted-foreground); font-size: 11px; margin-top: 4px; }
  #view > .people-toolbar h1 { font-size: 0; line-height: 0; margin: 0; }
  #view > .people-toolbar h1 > .ic { display: none; }
  #p-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  #p-list > .card { margin: 0; min-width: 0; }
}
@media (min-width: 1024px) {
  .cardlist .item .actions { justify-content: flex-start; flex-wrap: wrap; border-top: 1px solid var(--border-c); margin-top: 18px; padding-top: 13px; }
  .cardlist .item > .actions:last-child { margin-top: auto; }
  .cardlist .item .actions > button { flex: 0 1 auto; min-height: 32px; padding: 6px 12px; }
  .cardlist .item .actions > button.ok { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-bd); }
  .cardlist .item .actions > button.warn { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bd); }
  .cardlist .item .actions > button:hover { filter: brightness(.97); }
  .cardlist .item .item-tools .danger { background: transparent; color: var(--muted-foreground); border: 1px solid var(--border-c); }
  .cardlist .item .item-tools .danger:hover { background: var(--danger-bg); color: var(--danger-fg2); border-color: var(--danger-bd); }
  #t-pend .cardlist > .item { min-height: 185px; }
  .cardlist .item .meta { font-size: 11.5px; }
}
@media (min-width: 1024px) {
  .meeting-input-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.5fr);
    gap: 22px; align-items: start; margin-top: 22px; }
  .meeting-input-layout > .card { min-width: 0; margin-top: 0 !important; }
  .meeting-input-layout:has(#m-pick.hidden) { grid-template-columns: minmax(0, 1fr); }
  .meeting-processing-options .seg { flex-wrap: wrap; }
  .meeting-processing-options .seg button { padding: 10px; }
  #m-drop { padding: 32px 20px; background: var(--background); }
  #m-drop .big { color: var(--primary); margin-bottom: 8px; }
  #view > section[data-settings-cat]:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .app-sidebar:not(:has(#tabbar:not(.hidden))) > .desktop-brand,
  .app-sidebar:not(:has(#tabbar:not(.hidden))) > .desktop-workspace,
  .app-sidebar:not(:has(#tabbar:not(.hidden))) > .desktop-account { display: none; }
  .task-detail-info .actions > button.ok { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-bd); }
  .task-detail-info .card-tools .danger { background: transparent; border: 1px solid var(--border-c); color: var(--muted-foreground); }
  .task-detail-info .card-tools .danger:hover { background: var(--danger-bg); color: var(--danger-fg2); }
}

@media (min-width: 1024px) {
  #vp-card > .spread { align-items: flex-start; }
  #vp-card > .spread > .badge { flex: none; white-space: nowrap; }
}

/* Independent stacks prevent tall connection cards from creating holes below
   account controls. On mobile, display:contents restores the existing order. */
.settings-account-column { display: contents; }
#view > section[data-settings-cat="account"]:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr); }
.settings-account-column > #pw-card { order: 0; }
.settings-account-column > #gs-card { order: 1; }
.settings-account-column > #vp-card { order: 2; }
.settings-account-column > .card:has(#np-toggle) { order: 3; }
@media (min-width: 1024px) {
  #view > section[data-settings-cat="account"]:not(.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .settings-account-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .settings-account-column > .card, .settings-account-column > .vp-card { margin: 0; order: initial; min-width: 0; }
}
@media (min-width: 1024px) {
  .task-detail-main .task-chat-heading { margin: 0; padding: 4px 4px 13px; border-bottom: 1px solid var(--border-c); }
}
@media (min-width: 1024px) {
  .personal-reminder-list > .item { min-height: 155px; }
  .personal-note-list > .item { min-height: 180px; }
  .personal-reminder-list > .item .note-foot,
  .personal-note-list > .item .note-foot { margin-top: auto; padding-top: 18px; }
}
@media (min-width: 1024px) {
  #view > section[data-settings-cat="org"]:not(.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #view > section[data-settings-cat="org"]:has(> .settings-org-column:only-child) { grid-template-columns: minmax(0, 1fr); }
  .settings-org-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .settings-org-column > .card { margin: 0; order: initial; min-width: 0; }
  .mr-detail-toolbar, .mr-detail-layout { width: 100%; max-width: 1240px; margin-inline: auto; }
  .mr-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .mr-detail-main, .mr-detail-side { display: block; min-width: 0; }
  .mr-detail-main > .card, .mr-detail-side > .card { margin-bottom: 18px; }
  .mr-detail-side { position: sticky; top: calc(var(--desktop-header) + 24px); }
  .mr-detail-layout .mr-det-head { padding: 24px; }
  .mr-detail-layout .mr-det-head .title { font-size: 22px; font-weight: 700; line-height: 1.8; }
  .mr-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
  .mr-detail-facts > .item { border: 0; border-radius: 9px; background: var(--background); padding: 12px 14px; }
  .mr-detail-facts > .item > .muted { margin-bottom: 5px; font-size: 11px; }
  .mr-detail-data > .item { padding: 18px 0; }
  .mr-detail-data > .item:last-child { padding-bottom: 0; }
  .mr-detail-data > .item > .muted { margin-bottom: 8px; font-size: 12px; }
  .mr-detail-data .item > div:last-child { font-size: 13px; line-height: 2; overflow-wrap: anywhere; }
  .mr-detail-side > .row { justify-content: flex-start; }
  .mr-detail-layout #mr-talk:empty, .mr-detail-layout #mr-coordination:empty { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mr-detail-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
}

/* Optional owner-based Kanban: the same authorized tasks and card actions. */
@media (min-width: 1024px) {
  .tasks-open-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 24px 0 16px; }
  .tasks-open-toolbar > h2 { margin: 0; }
  .task-view-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px;
    background: var(--card-bg); border: 1px solid var(--border-c); border-radius: 10px; flex: none; }
  .task-view-switch > button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
    border: 0; border-radius: 7px; background: transparent; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
  .task-view-switch > button:hover { background: var(--secondary); color: var(--foreground); }
  .task-view-switch > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); font-weight: 650; }
  .task-view-switch .ic { width: 16px; height: 16px; margin: 0; }
  .task-owner-board { display: flex; align-items: stretch; gap: 16px; overflow-x: auto;
    max-width: 100%; padding: 1px 1px 15px; overscroll-behavior-x: contain; scrollbar-width: auto; }
  .task-owner-board:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: 12px; }
  .task-owner-column { display: flex; flex-direction: column; flex: 1 0 310px; min-width: 0; max-width: 420px;
    height: clamp(420px, 65dvh, 760px); background: var(--secondary);
    border: 1px solid var(--border-c); border-radius: 13px; overflow: hidden; }
  .task-owner-heading { display: flex; align-items: center; gap: 9px; padding: 14px 13px;
    border-bottom: 1px solid var(--border-c); flex: none; }
  .task-owner-avatar { display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 9px; color: var(--primary); background: var(--card-bg); flex: none; }
  .task-owner-avatar .ic { width: 17px; height: 17px; margin: 0; }
  .task-owner-heading > h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
  .task-owner-count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px;
    padding: 1px 6px; margin-inline-start: auto; border-radius: 6px; font-size: 11px;
    font-weight: 600; color: var(--muted-foreground); background: var(--card-bg); flex: none; }
  .task-owner-column > .task-owner-cards { display: flex; flex-direction: column; gap: 12px; margin: 0;
    padding: 12px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
  .task-owner-cards > .item { flex: none; min-height: 0; padding: 15px; border-radius: 10px; }
  .task-owner-cards > .item.review { padding-inline-start: 14px; }
  .task-owner-cards .item .title { font-size: 13px; line-height: 1.85; }
  .task-owner-cards .item .meta { font-size: 10.5px; }
  .task-owner-cards .task-card-description { font-size: 11.5px; }
  .task-owner-cards .item > .actions:last-child { margin-top: 14px; }
}

@media (min-width: 1024px) {
  .task-owner-cards > .item[draggable="true"] { cursor: grab !important; }
  .task-owner-cards > .item.is-dragging { opacity: .4; cursor: grabbing !important; transform: none; }
  .task-owner-column.is-drop-target { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
  .task-owner-column.is-drop-target > .task-owner-heading { background: var(--accent); }
  .task-owner-cards > .item.is-saving { opacity: .55; cursor: progress !important; pointer-events: none; }
  .task-owner-empty { padding: 28px 12px; text-align: center; font-size: 12px; color: var(--muted-foreground); }
  .kanban-move-status { font-size: 12px; color: var(--muted-foreground); margin: 0 0 12px; }
  .kanban-move-status:empty { display: none; }
  .kanban-move-status.is-error { color: var(--danger-fg2); background: var(--danger-bg); border-radius: 8px; padding: 9px 12px; }
}

@media (min-width: 1024px) {
  .task-detail-main .cb-text { font-size: 15px; line-height: 1.95; }
  .task-detail-main .cb { max-width: min(94%, 760px); }
}
@media (min-width: 1024px) {
  .task-detail-main .cb-sys { font-size: 14px; line-height: 1.9; }
}