/* TractionTeam modern UI v3, 2026-10-14.
 * Presentation only. Keep original theme, permission/state classes and app logic.
 * Inter is already self-hosted by theme.css; no third-party font requests.
 */
:root {
  --tt-ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tt-ui-radius: 12px;
  --tt-ui-border: #dfe6ef;
  --tt-ui-muted: #63738a;
  --tt-ui-text: #28384c;
  --tt-ui-heading: #16263e;
  --tt-ui-surface: #fff;
  --tt-ui-soft: #f5f7fb;
  --tt-ui-hover: #edf2f8;
  --tt-ui-selected: #eaf2ff;
  --tt-ui-accent: #245f9e;
  --tt-ui-shadow: 0 8px 28px #13284518;
}
html.light {
  --site-background: #f5f7fb;
  --card-background-color: #fff;
  --text: #28384c;
  --text-strong: #16263e;
  --text-light: #63738a;
}
html.dark {
  --tt-ui-border: #344257;
  --tt-ui-muted: #a9b6c9;
  --tt-ui-text: #dbe4f1;
  --tt-ui-heading: #f0f5fc;
  --tt-ui-surface: #1a2433;
  --tt-ui-soft: #131c29;
  --tt-ui-hover: #253247;
  --tt-ui-selected: #233b5b;
  --tt-ui-accent: #98c4fb;
  --tt-ui-shadow: 0 8px 28px #0005;
  --site-background: #131c29;
  --card-background-color: #1a2433;
  --text: #dbe4f1;
  --text-strong: #f0f5fc;
  --text-light: #a9b6c9;
}

/* One type scale for navigation, native views and the threaded renderer. */
html body { font-family: var(--tt-ui-font) !important; font-size: 14px; line-height: 1.6; color: var(--tt-ui-text); }
#app :is(h1,h2,h3,h4,h5,h6,.title,.task-section-title,.menu-list li,.detail-title,.action-heading) {
  font-family: var(--tt-ui-font) !important;
}
#app :is(h1,h2,h3,h4,h5,h6,.title) { color: var(--tt-ui-heading); letter-spacing: -.02em; }
#app :is(h1,.title.is-3) { font-weight: 600 !important; font-size: 26px; line-height: 1.3; }
#app :is(h2,.content h2,.card-header-title) { font-size: 18px; line-height: 1.4; font-weight: 600 !important; }
#app :is(h3,.content h3) { font-size: 16px; line-height: 1.45; font-weight: 600 !important; }
#app .task-view h1.title { font-size: 24px !important; line-height: 1.4 !important; font-weight: 600 !important; }
#app .task-view h2.task-section-title { font-size: 16px !important; line-height: 1.5; margin-block-end: 12px; }
#app .home > .content.has-text-centered { text-align: start !important; }
#app .home > .content h1 { margin-block: 0 20px; }
#app .task-view :is(.description,.comments-container) { font-size: 14px; line-height: 1.65; }
#app .task-view .tiptap { line-height: 1.65; }
#app .task-view :is(.tiptap a,#tt-links-box a) { color: var(--tt-ui-accent); }
#app .task-view :is(.detail-title,.action-heading) { font-size: 12px !important; font-weight: 500; letter-spacing: .01em; text-transform: none !important; color: var(--tt-ui-muted); }
#app :is(.breadcrumb,.breadcrumb a) { font-size: 12px; color: var(--tt-ui-muted); }
#app .task-view nav[aria-label="Breadcrumb"] { font-size: 13px; line-height: 1.6; color: var(--tt-ui-muted); margin-block: 8px 20px; }
#app .task-view nav[aria-label="Breadcrumb"] :is(a,button) { font-size: inherit; color: inherit; }
#app .task-view .heading .task-id { display: inline-block; font: 500 12px/1.5 var(--tt-ui-font) !important; letter-spacing: 0; color: var(--tt-ui-muted); border: 1px solid var(--tt-ui-border); border-radius: 6px; padding: 4px 7px; margin-block-start: 4px; }

/* Calm navigation. Keep the native collapse and drag-to-resize mechanics. */
#app .navbar { background: var(--tt-ui-surface) !important; border-bottom: 1px solid var(--tt-ui-border) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
#app .navbar .username { font-family: var(--tt-ui-font) !important; font-size: 13px; font-weight: 500; }
#app .menu-container { background: var(--tt-ui-soft); border-inline-end: 1px solid var(--tt-ui-border); }
#app .menu-container :is(.menu-list a,.list-menu-link) { font-size: 14px; font-weight: 400; line-height: 1.4; }
#app .menu-container .top-menu .menu-list a { font-weight: 500; }
#app .menu-container .menu-list a:hover { background: var(--tt-ui-hover) !important; }
#app .menu-container .menu-list a.is-active { color: var(--tt-ui-accent); background: var(--tt-ui-selected) !important; font-weight: 600; }
#app .menu-container .menu-list li > div { border-radius: 8px; }
#app .menu-container .menu-list li > div:hover { background: var(--tt-ui-hover); }
#tt-plans-menu { border-top-color: var(--tt-ui-border) !important; }
#tt-plans-menu :is(.tt-plans-title,.tt-plan-name) { font-weight: 500; }
#tt-plans-menu .tt-plan-role { color: var(--tt-ui-muted); }
@media (min-width: 770px) {
  #app .menu-container { inline-size: clamp(260px,var(--sidebar-width),320px) !important; }
  #app .app-content.is-menu-enabled { margin-inline-start: clamp(260px,var(--sidebar-width),320px) !important; }
}

/* Controls: sentence case, consistent weight, no jumping hover animations. */
#app .button {
  font-family: var(--tt-ui-font) !important; font-size: 13px !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.35 !important;
  min-block-size: 36px; border-radius: 8px !important; padding-inline: 12px;
  box-shadow: none !important; transition: background-color .15s,border-color .15s,color .15s !important;
}
#app .button:hover { transform: none !important; box-shadow: none !important; }
#app .button.is-small { min-block-size: 30px; font-size: 12px !important; padding-inline: 9px; }
#app .button.is-outlined:not(.is-danger):not(.is-success):not(.button--mark-done) { border: 1px solid var(--tt-ui-border); background: var(--tt-ui-surface); color: var(--tt-ui-text); }
#app .button.is-outlined:not(.is-danger):not(.is-success):not(.button--mark-done):hover { background: var(--tt-ui-hover); }
#app :is(.input,.textarea,.select select) { font-family: var(--tt-ui-font) !important; font-size: 14px; line-height: 1.5; color: var(--tt-ui-text); border-radius: 8px !important; border-color: var(--tt-ui-border) !important; box-shadow: none; }
#app :is(.input,.textarea,.select select):focus { border-color: var(--tt-ui-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--tt-ui-accent) 15%,transparent) !important; }
#app :is(h1,h2,h3).input:not(:focus) { border-color: transparent !important; box-shadow: none !important; }
#app :is(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--tt-ui-accent); outline-offset: 3px; }
#app :is(.input,.textarea,.select select):focus-visible { outline: none !important; }
#app :is(.label,.card-header-title) { font-family: var(--tt-ui-font); font-weight: 600; }

/* Surfaces retain the layout and meaning of status/priority colours. */
#app .card { border: 1px solid var(--tt-ui-border) !important; border-radius: var(--tt-ui-radius) !important; box-shadow: none !important; }
#app .card-header { box-shadow: none; border-bottom: 1px solid var(--tt-ui-border); }
#app .project-card { border-radius: 12px; box-shadow: none; }
#app .project-card .project-title { font-family: var(--tt-ui-font) !important; font-size: 15px; font-weight: 500; line-height: 1.45; }
#app :is(.dropdown-content,.modal-content .card) { border: 1px solid var(--tt-ui-border) !important; border-radius: var(--tt-ui-radius) !important; box-shadow: var(--tt-ui-shadow) !important; }
#app .switch-view { padding: 4px !important; background: var(--tt-ui-hover) !important; border-radius: 10px !important; gap: 3px; }
#app .switch-view a { font-size: 13px; font-weight: 500 !important; padding: 7px 12px; border-radius: 7px !important; }
#app .switch-view a.is-active { box-shadow: none !important; }
#app .single-task { font-size: 14px; line-height: 1.5; padding-block: 12px; }
#app .single-task:hover { background: var(--tt-ui-hover); }
#app .task-view > .columns > .action-buttons { align-self: flex-start; border: 1px solid var(--tt-ui-border); border-radius: 12px; background: var(--tt-ui-surface); padding: 14px; }
#app .task-view .action-buttons .button { white-space: normal; text-align: start; justify-content: flex-start; max-inline-size: 100%; padding-block: 8px; min-block-size: 36px; }
#app .task-view .action-buttons .action-heading { margin-block: 16px 8px; display: block; }
@media (min-width: 1100px) {
  #app .task-view > .columns { gap: 24px; margin-inline: 0; }
  #app .task-view > .columns > .detail-content { flex: 1; min-width: 0; width: auto; padding-inline: 0; }
  #app .task-view > .columns > .action-buttons { flex: 0 0 242px; width: 242px; }
}
@media (min-width: 770px) and (max-width: 1099px) {
  #app .task-view > .columns { display: flex; flex-direction: column; margin-inline: 0; }
  #app .task-view > .columns > .column { width: 100%; }
  #app .task-view > .columns > .action-buttons { align-self: stretch; }
}

/* Project tables and kanban use the same compact, readable card language. */
#app .table { font-size: 13px; }
#app .table :is(th,td) { border-color: var(--tt-ui-border); padding: 12px 14px; vertical-align: middle; }
#app .table th { font-size: 12px; font-weight: 600; color: var(--tt-ui-muted); background: var(--tt-ui-soft); }
#app .kanban .bucket { background: var(--tt-ui-hover) !important; border-radius: 12px !important; }
#app .kanban .bucket :is(.title,h2) { font-size: 14px; font-weight: 600 !important; }
#app .kanban .task { border: 1px solid var(--tt-ui-border) !important; border-radius: 10px !important; box-shadow: none !important; font-size: 14px; line-height: 1.5; }
#app .kanban .task:hover { transform: none !important; box-shadow: 0 2px 8px #1328450d !important; }
#app .kanban .task h3 { font-size: 14px; font-weight: 500 !important; line-height: 1.5; }
#app .pagination-link { font-family: var(--tt-ui-font); font-size: 13px; border-radius: 8px; }

/* Custom team feed, links and thread cards belong to the same visual system. */
#app :is(.ttf-card,#tt-links-box) { border: 1px solid var(--tt-ui-border) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--tt-ui-surface) !important; }
#app .ttf-hhead { padding-block-end: 12px; }
#app .ttf-htitle { font-size: 15px; font-weight: 600; color: var(--tt-ui-heading); }
#app .ttf-hpost { padding-block: 14px; box-shadow: none; }
#app .ttf-hti { font-size: 14px; font-weight: 500; color: var(--tt-ui-text); }
#app .ttf-hline { font-size: 12px; color: var(--tt-ui-muted); }
#app .ttf-hbody { font-size: 13px; line-height: 1.65; color: var(--tt-ui-muted); }
#app .ttf-hbtn { font-family: var(--tt-ui-font); font-size: 12px; font-weight: 500; text-transform: none; border-radius: 8px; min-height: 32px; }
#app .tt-obs-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--tt-ui-muted) !important; }
#app .tt-post { border-color: var(--tt-ui-border); background: var(--tt-ui-surface); color: var(--tt-ui-text); }
#app .tt-thread-answers { background: var(--tt-ui-soft); border-color: var(--tt-ui-border); }
#app .tt-thread-head strong { color: var(--tt-ui-heading); font-weight: 600; }
#app :is(.tt-thread-head time,.tt-edited,.tt-thread-count,.tt-thread-status) { color: var(--tt-ui-muted); }
#app .tt-thread-toolbar button { font-family: var(--tt-ui-font); border-color: var(--tt-ui-border); background: var(--tt-ui-surface); color: var(--tt-ui-text); }
#app .tt-thread-toolbar button[aria-pressed=true] { background: var(--tt-ui-selected); border-color: color-mix(in srgb,var(--tt-ui-accent) 35%,var(--tt-ui-border)); color: var(--tt-ui-accent); }
.tt-comment-menu { background: var(--tt-ui-surface) !important; color: var(--tt-ui-text) !important; border-color: var(--tt-ui-border) !important; }
.tt-menu-item:is(:hover,:focus-visible) { background: var(--tt-ui-hover) !important; }
html.dark .tt-menu-danger { color: #fca5a5; }

/* Comment composer: one focus surface, compact native toolbar, quiet quotes.
 * CSS only: no editor DOM replacement, hidden controls or draft transformations.
 */
#app .comments-container .comments > .new-comment-top,
#app .comments-container .comments > .comment.tt-inline-native {
  box-sizing: border-box;
  padding: 16px !important;
  border: 1px solid var(--tt-ui-border) !important;
  border-radius: 14px !important;
  background: var(--tt-ui-surface) !important;
  box-shadow: none;
  gap: 0;
}
#app .comments-container .comments > .new-comment-top:focus-within,
#app .comments-container .comments > .comment.tt-inline-native:focus-within {
  border-color: color-mix(in srgb,var(--tt-ui-accent) 55%,var(--tt-ui-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--tt-ui-accent) 9%,transparent);
}
#app .comments-container :is(.new-comment-top,.tt-inline-native) > .media-left {
  display: block !important; flex: 0 0 36px; inline-size: 36px;
  margin: 0 12px 0 0; padding-block-start: 2px;
}
#app .comments-container :is(.new-comment-top,.tt-inline-native) > .media-left .image.is-avatar {
  inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover;
}
#app .comments-container .new-comment-top > .media-content { min-inline-size: 0; inline-size: auto; flex: 1 1 0%; overflow: visible; }
#app .comments-container .new-comment-top .form { min-inline-size: 0; }
#app .comments-container .tt-composer-context {
  align-items: center; gap: 6px 12px; margin-block-end: 12px;
  font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--tt-ui-muted);
}
#app .comments-container .tt-composer-context button {
  margin-inline-start: auto; padding: 4px 8px; border-radius: 6px;
  font: inherit; color: var(--tt-ui-accent); text-decoration: none;
}
#app .comments-container .tt-composer-context button:hover { background: var(--tt-ui-hover); }
#app .comments-container .tiptap__wrapper-is-editing,
#app .comments-container .tiptap__wrapper-is-editing:focus-within {
  border: 0 !important; border-radius: 10px; box-shadow: none !important;
  background: var(--tt-ui-surface); min-inline-size: 0;
}
#app .comments-container .tiptap__wrapper-is-editing .editor-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
  padding: 7px; margin: 0; border: 0 !important;
  border-block-end: 1px solid var(--tt-ui-border) !important;
  border-radius: 9px 9px 0 0; background: var(--tt-ui-soft);
}
#app .comments-container .editor-toolbar__segment {
  display: flex; align-items: center; flex: 0 0 auto; flex-wrap: wrap;
  max-inline-size: 100%; column-gap: 2px;
}
#app .comments-container .editor-toolbar > * + * {
  margin-inline-start: 5px; padding-inline-start: 5px;
  border-inline-start: 1px solid var(--tt-ui-border);
}
#app .comments-container .editor-toolbar__button {
  display: inline-flex; justify-content: center; align-items: center;
  flex: 0 0 auto; min-inline-size: 30px; inline-size: 30px; block-size: 30px;
  padding: 0; margin: 0; border: 1px solid transparent; border-radius: 6px;
  font-size: 13px; line-height: 1; color: var(--tt-ui-muted); background: transparent;
}
#app .comments-container .editor-toolbar__button .icon { inline-size: 18px; block-size: 18px; font-size: 14px; }
#app .comments-container .editor-toolbar__button .icon svg { max-inline-size: 15px; max-block-size: 15px; }
#app .comments-container .editor-toolbar__button .icon__lower-text { font-size: 9px; inset-block-end: -1px; inset-inline-end: -1px; }
#app .comments-container .editor-toolbar__button:hover { background: var(--tt-ui-hover); border-color: var(--tt-ui-border); color: var(--tt-ui-heading); }
#app .comments-container .editor-toolbar__button:is(.is-active,[aria-pressed="true"]) { background: var(--tt-ui-selected); color: var(--tt-ui-accent); }
#app .comments-container .editor-toolbar__button:disabled { opacity: .4; }
#app .comments-container .editor-toolbar__button:focus-visible { outline: 2px solid var(--tt-ui-accent); outline-offset: 1px; }
#app .comments-container .editor-toolbar__table-buttons > .editor-toolbar__button {
  inline-size: auto; min-inline-size: 30px; padding-inline: 7px; margin: 2px;
}
#app .comments-container .tiptap__editor-is-edit-enabled { min-block-size: 112px; }
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror[contenteditable="true"] {
  box-sizing: border-box; min-block-size: 112px; padding: 14px 4px 16px;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  font-family: var(--tt-ui-font); font-size: 14px; line-height: 1.65; color: var(--tt-ui-text);
}
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror > :first-child { margin-block-start: 0; }
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror > :last-child { margin-block-end: 0; }
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror p.is-empty::before {
  color: var(--tt-ui-muted); opacity: .8; font-size: 13px;
}
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror blockquote {
  margin: 10px 0 14px; padding: 10px 13px;
  background: var(--tt-ui-soft); color: var(--tt-ui-muted);
  border: 0; border-inline-start: 3px solid color-mix(in srgb,var(--tt-ui-accent) 28%,var(--tt-ui-border));
  border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6;
}
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror blockquote p { margin-block: 5px; }
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror blockquote p:first-child { margin-block-start: 0; }
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror blockquote p:last-child { margin-block-end: 0; }
#app .comments-container .tiptap__wrapper-is-editing .comment-quote__header { padding-block-end: 5px; font-size: 12px; }
#app .comments-container .tiptap__wrapper-is-editing .comment-quote__author { color: var(--tt-ui-heading); font-weight: 500; }
#app .comments-container .tiptap__wrapper-is-editing .comment-quote__avatar { inline-size: 20px; block-size: 20px; }
#app .comments-container .tiptap__wrapper-is-editing .ProseMirror > p:has(> a[href*="#comment-"]) { font-size: 12px; margin-block-end: 6px; }
#app .comments-container .new-comment-top .field { margin-block-end: 0; }
#app .comments-container .new-comment-top .field + .field {
  margin-block-start: 10px; padding-block-start: 12px;
  border-block-start: 1px solid var(--tt-ui-border);
  display: flex; justify-content: flex-end;
}
#app .comments-container .new-comment-top .button.is-primary { min-block-size: 36px; padding-inline: 16px; }
@media (max-width: 600px) {
  #app .comments-container .comments > .new-comment-top,
  #app .comments-container .comments > .comment.tt-inline-native { padding: 12px !important; }
  #app .comments-container :is(.new-comment-top,.tt-inline-native) > .media-left { flex-basis: 28px; inline-size: 28px; margin-inline-end: 8px; }
  #app .comments-container :is(.new-comment-top,.tt-inline-native) > .media-left .image.is-avatar { inline-size: 28px; block-size: 28px; }
  #app .comments-container .tt-composer-context { align-items: flex-start; font-size: 11px; }
  #app .comments-container .tt-composer-context button { margin-inline-start: 0; }
  #app .comments-container .tiptap__wrapper-is-editing .editor-toolbar { padding: 5px; row-gap: 5px; }
  #app .comments-container .editor-toolbar__button { inline-size: 32px; min-inline-size: 32px; block-size: 32px; }
  #app .comments-container .tiptap__wrapper-is-editing .ProseMirror[contenteditable="true"] { font-size: 16px; }
  #app .comments-container .new-comment-top .button.is-primary { min-block-size: 40px; }
}

@media (max-width: 769px) {
  #app :is(h1,.title.is-3) { font-size: 22px; }
  #app .task-view h1.title { font-size: 21px !important; }
  #app .menu-container { max-inline-size: 320px; }
  #app :is(input.input,textarea.textarea,.select select) { font-size: 16px; }
  #app .button { min-block-size: 40px; }
  #app .switch-view { flex-wrap: wrap; }
  #app .switch-view a { padding: 8px 10px; }
  #app .task-view > .columns > .action-buttons { margin-inline: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #app :is(.button,.kanban .task,.menu-container a) { transition: none !important; }
}
@media print {
  #app .app-content { margin-inline-start: 0 !important; }
  #app .card { box-shadow: none !important; }
}