/* Boss HQ demo: tasks screen styles. Shared classes live in demo.css. */
.tk-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tk-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}
.tk-sjob {
  border: 1px solid var(--hair2);
  background: var(--card);
  border-radius: 4px;
  padding: 8px 14px;
  text-align: left;
  color: var(--text);
  white-space: nowrap;
  border-left: 3px solid var(--accent);
}
.tk-sjob b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.tk-sjob b i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jc, var(--accent));
}
.tk-sjob small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.tk-sjob.warn small {
  color: var(--risk);
}
.tk-sjob.on {
  outline: 2px solid var(--accent);
  background: var(--info-bg);
}
.tk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hair);
}
.tk-bar h2 {
  font-size: 16px;
  margin: 0;
}
.tk-fs {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tk-fsel {
  width: auto;
  min-width: 130px;
  padding: 6px 10px;
}
.tk-bulk {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  background: var(--info-bg);
}
.tk-tbl th {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.33px;
  text-transform: uppercase;
  padding: 10px 14px;
  background: var(--sunk);
  color: var(--muted);
  border-bottom: 1px solid var(--hair2);
}
.tk-tbl td {
  vertical-align: middle;
  padding: 11px 14px;
  font-size: 13.5px;
  height: 64px;
  border-bottom: 1px solid var(--hair);
}
.tk-row.fin .tk-title {
  text-decoration: line-through;
  color: var(--muted);
}
.tk-row.sub .tk-name {
  padding-left: 34px;
}
.tk-c {
  width: 40px;
  text-align: center;
}
.tk-name {
  min-width: 240px;
}
.tk-title,
.tk-ctitle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tk-title:hover,
.tk-ctitle:hover {
  color: var(--link);
  text-decoration: underline;
}
.tk-nn {
  margin-left: 8px;
}
.tk-sublab {
  color: var(--faint);
  margin-right: 4px;
  vertical-align: middle;
}
.tk-flames {
  display: inline-flex;
  gap: 0;
}
.tk-fnum {
  display: none;
  align-self: center;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
@media (max-width: 768px) {
  .tk-fnum {
    display: inline;
  }
}
.tk-fl {
  border: 0;
  background: none;
  padding: 0 1px;
  cursor: pointer;
  line-height: 0;
}
.tk-flsvg {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.4;
  opacity: 0.6;
}
.tk-flsvg .core {
  fill: none;
}
.tk-flsvg.on {
  fill: #e8731a;
  stroke: #c2410c;
  opacity: 1;
}
.tk-flsvg.on .core {
  fill: #ffc857;
  stroke: none;
}
.tk-jobchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hair2);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.tk-jobchip i,
.tk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.tk-dot {
  margin-right: 8px;
}
.tk-st {
  min-width: 128px;
  padding: 6px 10px;
}
.tk-st.st-1 {
  background: var(--info-bg);
}
.tk-st.st-2 {
  background: var(--risk-bg);
}
.tk-st.st-3 {
  background: var(--ok-bg);
}
.tk-date {
  min-width: 130px;
  padding: 5px 8px;
  font-size: 12.5px;
}
.tk-over {
  color: var(--risk);
  font-size: 12px;
  margin-top: 3px;
  font-weight: 500;
}
.tk-add {
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.tk-add:hover {
  color: var(--link);
}
.tk-fu {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 2px 0;
}
.tk-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--info-fg);
  font-size: 10px;
  font-weight: 700;
  margin-right: 6px;
}
.tk-linkchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--link);
  cursor: pointer;
  font-size: 12.5px;
}
.tk-mini,
.tk-ico {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}
.tk-danger:hover {
  color: var(--risk);
}
td.tk-act {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
.tk-finrow td {
  background: var(--sunk);
  padding: 8px 14px;
  height: auto;
}
.tk-fold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.tk-grp {
  padding: 14px;
}
.tk-grph {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tk-grph h3 {
  margin: 0;
  font-size: 15px;
}
.tk-grph .btn {
  margin-left: auto;
}
.tk-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tk-col {
  background: var(--sunk);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 10px;
  min-height: 120px;
}
.tk-col.over {
  outline: 2px dashed var(--accent);
}
.tk-col header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.tk-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: grab;
  font-size: 13px;
}
.tk-cmeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tk-cfl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}
.tk-cpill {
  margin-top: 6px;
}
.tk-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
}
.tk-who {
  display: inline-flex;
  align-items: center;
}
.tk-drop {
  border: 2px dashed var(--faint);
  border-radius: 6px;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.tk-colrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.tk-colfix {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.tk-tick {
  width: 18px;
  height: 18px;
  border: 1px solid var(--input);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tk-tick.on {
  background: var(--accent);
  color: var(--on-tone);
  border-color: var(--accent);
}
.tk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tk-note {
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.tk-ta {
  width: 100%;
  min-height: 60px;
  margin: 8px 0;
}
@media (max-width: 768px) {
  .tk-grid {
    grid-template-columns: 1fr;
  }
  .tk-fs {
    margin-left: 0;
  }
  .tk-tbl {
    min-width: 0;
  }
  table.tk-tbl th,
  table.tk-tbl td {
    padding-left: 5px;
    padding-right: 5px;
  }
  table.tk-tbl td.tk-name {
    min-width: 140px;
  }
}
/* the real app's board scrolls four 78vw columns up to 860 (boss app.css:2456), so this one keeps 860 */
@media (max-width: 860px) {
  .tk-board {
    grid-template-columns: repeat(4, 78vw);
    overflow-x: auto;
  }
}
.pop .pop-row {
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}
.tk-jobchip {
  white-space: nowrap;
}
.tk-name .pill {
  white-space: nowrap;
  margin-left: 8px;
}
.tk-card-wrap {
  min-width: 0;
}
.tk-boardwrap .tk-grp {
  padding: 14px 0;
}
.tk-bchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
@media (max-width: 768px) {
  .tk-top {
    gap: 8px;
  }
  .tk-sjob {
    min-height: 52px;
  }
  .seg button {
    min-height: 44px;
    min-width: 56px;
  }
  .tk-bar {
    padding: 12px;
  }
  .tk-fs {
    width: 100%;
  }
  .tk-fs .btn {
    min-height: 44px;
  }
  .tk-fsel {
    min-height: 44px;
    flex: 1 1 140px;
    font-size: 16px;
  }
  .tk-card-wrap {
    overflow: hidden;
  }
  .tk-tbl {
    min-width: 0;
    width: 100%;
    display: block;
  }
  .tk-tbl thead {
    display: none;
  }
  .tk-tbl tbody {
    display: block;
  }
  .tk-tbl tr.tk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hair);
  }
  .tk-tbl tr.tk-row td {
    display: block;
    padding: 0;
    height: auto;
    border: 0;
    min-width: 0;
  }
  .tk-tbl tr.tk-finrow,
  .tk-tbl tr.tk-finrow td {
    display: block;
  }
  .tk-tbl td.tk-c {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 0;
  }
  .tk-tbl td.tk-c input {
    width: 24px;
    height: 24px;
  }
  .tk-tbl td.tk-name {
    order: 1;
    flex: 1 1 calc(100% - 60px);
    min-width: 0;
    margin-right: 10px;
  }
  .tk-title {
    min-height: 44px;
    display: inline-block;
    text-align: left;
    font-size: 15px;
  }
  .tk-k-own {
    order: 2;
  }
  .tk-k-prio {
    order: 3;
  }
  .tk-k-job {
    order: 4;
  }
  .tk-k-status {
    order: 5;
  }
  .tk-k-due {
    order: 6;
  }
  .tk-k-link {
    order: 7;
  }
  .tk-k-fu {
    order: 8;
  }
  .tk-tbl td.tk-act {
    order: 9;
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .tk-fl {
    min-width: 44px;
    min-height: 44px;
  }
  .tk-jobchip,
  .tk-fu,
  .tk-add,
  .tk-linkchip {
    min-height: 44px;
  }
  .tk-st,
  .tk-date {
    min-height: 44px;
    min-width: 140px;
    font-size: 16px;
  }
  .tk-ico,
  .tk-mini,
  .tk-act .btn {
    min-width: 44px;
    min-height: 44px;
  }
  .tk-fold {
    min-height: 44px;
  }
  .tk-bulk .btn {
    min-height: 44px;
  }
  .tk-grp {
    padding: 10px;
  }
  .tk-grph .btn {
    min-height: 44px;
  }
  .tk-board {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .tk-col {
    scroll-snap-align: start;
  }
  .tk-ctitle {
    min-height: 44px;
    font-size: 15px;
  }
  .tk-cmeta .tk-jobchip {
    min-height: 44px;
  }
  .mini,
  .tk-ta,
  input.mini,
  textarea.mini,
  .modal .sel {
    font-size: 16px;
    min-height: 44px;
  }
}
.tk-fsels {
  display: contents;
}
.tk-fbtn {
  display: none;
}
@media (max-width: 768px) {
  .tk-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .tk-fsels {
    display: none;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    order: 9;
  }
  .tk-fsels.open {
    display: flex;
  }
  .tk-bl {
    display: none;
  }
  .tk-fs .btn {
    min-width: 44px;
    justify-content: center;
  }
  .tk-tbl tr.tk-row {
    gap: 4px 8px;
  }
}
.tk-tbl th,
.tk-tbl td {
  padding-left: 9px;
  padding-right: 9px;
}
.tk-name {
  min-width: 190px;
}
.tk-st {
  min-width: 116px;
}
.tk-date {
  min-width: 116px;
}
.tk-name .dr-taskpill {
  display: inline-flex;
  white-space: nowrap;
  margin-left: 8px;
}
.tk-act .btn {
  vertical-align: middle;
  margin-right: 2px;
}
.tk-rc {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--hair2);
  background: var(--card);
  color: var(--on-tone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.tk-rc:hover {
  border-color: var(--ok);
}
.tk-rc.on {
  background: var(--ok);
  border-color: var(--ok);
}
@media (max-width: 768px) {
  .tk-tbl td.tk-c {
    width: 44px;
  }
  .tk-tbl tr.tk-row {
    padding: 6px 12px;
    gap: 0 8px;
  }
  .tk-tbl td.tk-name {
    flex: 1 1 calc(100% - 140px);
  }
  .tk-title {
    min-height: 0;
    padding: 10px 0 4px;
    line-height: 1.3;
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tk-tbl td.tk-k-due {
    order: 2;
    margin-left: auto;
  }
  .tk-tbl td.tk-k-due .tk-date {
    min-width: 0;
    border: 0;
    background: none;
    padding: 0 4px;
    width: auto;
  }
  .tk-tbl td.tk-k-prio {
    order: 3;
    flex: 0 0 auto;
  }
  .tk-tbl td.tk-k-job {
    order: 4;
  }
  .tk-tbl td.tk-k-status {
    order: 5;
  }
  .tk-tbl td.tk-k-link,
  .tk-tbl td.tk-k-fu {
    order: 7;
  }
  .tk-tbl td.tk-act {
    order: 6;
    margin-left: auto;
  }
  .tk-tbl td.tk-act .btn-ok {
    display: none;
  }
  .tk-fl {
    min-width: 44px;
  }
  .tk-st {
    min-width: 128px;
  }
}
.tk-rc {
  border: 0;
  box-shadow: inset 0 0 0 2px var(--faint);
}
.tk-rc.on {
  box-shadow: none;
}
.tk-fs .btn,
.tk-fbtn,
.tk-fsel .sel-l {
  white-space: nowrap;
}
.tk-fsel .sel-l {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .tk-tbl tr.tk-row {
    gap: 0 6px;
    padding: 4px 12px 8px 4px;
  }
  .tk-tbl td.tk-c {
    order: 0;
    flex: 0 0 44px;
    height: 44px;
  }
  .tk-tbl td.tk-name {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
  }
  .tk-title {
    padding: 6px 0;
  }
  .tk-tbl td.tk-k-due {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: center;
  }
  .tk-tbl td.tk-k-due .tk-date {
    min-height: 28px;
    min-width: 0;
    padding: 0 4px;
    font-size: 14px;
    justify-content: flex-end;
    gap: 6px;
  }
  .tk-tbl td.tk-k-due .tk-over {
    margin: 0 4px 0 0;
    font-size: 12px;
  }
  .tk-tbl td.tk-k-prio {
    order: 3;
    margin-left: 44px;
    flex: 0 0 auto;
  }
  .tk-tbl td.tk-k-job {
    order: 4;
    flex: 1 1 0;
    min-width: 0;
  }
  .tk-tbl td.tk-k-job .tk-jobchip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 36px;
  }
  .tk-tbl td.tk-k-status {
    order: 5;
    margin-left: 44px;
    flex: 0 0 auto;
  }
  .tk-tbl td.tk-k-link,
  .tk-tbl td.tk-k-fu {
    order: 6;
  }
  .tk-tbl td.tk-k-link .tk-add,
  .tk-tbl td.tk-k-fu .tk-add {
    font-size: 12.5px;
  }
  .tk-tbl td.tk-act {
    order: 7;
    margin-left: auto;
  }
  .tk-st {
    min-width: 120px;
    min-height: 40px;
  }
}
@media (max-width: 768px) {
  .tk-tbl tr.tk-row {
    display: grid;
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    gap: 0 8px;
    align-items: center;
    padding: 4px 12px 8px 4px;
    grid-template-areas: 'c name name due' '. prio job job' '. status link act' '. fu own own';
  }
  .tk-tbl td.tk-c {
    grid-area: c;
    margin: 0;
    align-self: start;
  }
  .tk-tbl td.tk-name {
    grid-area: name;
    margin: 0;
  }
  .tk-tbl td.tk-k-due {
    grid-area: due;
    margin: 0;
  }
  .tk-tbl td.tk-k-prio {
    grid-area: prio;
    margin: 0;
  }
  .tk-tbl td.tk-k-job {
    grid-area: job;
    margin: 0;
  }
  .tk-tbl td.tk-k-status {
    grid-area: status;
    margin: 0;
  }
  .tk-tbl td.tk-k-link {
    grid-area: link;
    margin: 0;
  }
  .tk-tbl td.tk-act {
    grid-area: act;
    margin: 0;
    justify-self: end;
  }
  .tk-tbl td.tk-k-fu {
    grid-area: fu;
    margin: 0;
  }
  .tk-tbl td.tk-k-own {
    grid-area: own;
    margin: 0;
  }
  .tk-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .tk-tbl tr.tk-finrow {
    display: block;
  }
}
.tk-add,
.tk-fu,
.tk-linkchip {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .tk-tbl tr.tk-row {
    grid-template-areas: 'c name name due' '. prio job job' '. status status act' '. link fu fu' '. own own own';
  }
  .tk-tbl td.tk-k-prio {
    margin-top: -4px;
  }
}
.tk-fchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--info-bg);
  color: var(--info-fg);
  border-radius: 14px;
  padding: 4px 4px 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
}
.tk-fchip button {
  background: none;
  border: 0;
  color: inherit;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .tk-rc {
    position: relative;
  }
  .tk-rc::after {
    content: '';
    position: absolute;
    inset: -10px;
  }
}

/* List/Board toggle: active option filled, like the real seg-b.on */
.tk-top .seg {
  display: inline-flex;
  border: 1px solid var(--input);
  border-radius: 3px;
  overflow: hidden;
  background: var(--card);
}
.tk-top .seg button {
  padding: 6px 15px;
  font-size: 12.5px;
  background: var(--card);
  color: var(--muted);
  border: 0;
  cursor: pointer;
}
.tk-top .seg button + button {
  border-left: 1px solid var(--input);
}
.tk-top .seg button:hover {
  background: var(--sunk);
}
.tk-top .seg button.on {
  background: var(--btn);
  color: var(--btn-t);
  font-weight: 600;
}
.tk-top .seg button.on:hover {
  background: var(--btn-h);
}
:root[data-theme='dark'] .tk-top .seg button.on {
  background: var(--accent);
  color: var(--on-accent);
}

/* Tablet tap targets: 44px hit areas for a coarse pointer, desktop look unchanged */
@media (pointer: coarse) and (min-width: 769px) {
  .tk-top .seg button {
    min-height: 44px;
    min-width: 56px;
  }
  .tk-rc {
    position: relative;
  }
  .tk-rc::after {
    content: '';
    position: absolute;
    inset: -10px;
  }
  .tk-title,
  .tk-ctitle {
    min-height: 44px;
  }
  .tk-fl {
    min-width: 44px;
    min-height: 44px;
  }
  .tk-jobchip,
  .tk-add,
  .tk-fu,
  .tk-fold,
  .tk-mini {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tk-linkchip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .tk-fchip button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* phones: no List/Board toggle, as in the real app; the list always shows */
@media (max-width: 768px) {
  .tk-top .seg {
    display: none;
  }
}

/* phones: the task card. Every control is 44px, toolbar icons carry visible labels, no stray fills, link and follow-up on their own lines */
@media (max-width: 768px) {
  .tk-bl {
    display: inline;
  }
  .tk-fs .btn {
    min-height: 44px;
  }
  .tk-tbl tr.tk-row {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: 'c name name due' '. prio job job' '. status status act' '. link fu fu' '. own own own';
    row-gap: 0;
  }
  .tk-tbl td.tk-k-link,
  .tk-tbl td.tk-k-fu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
  }
  .tk-tbl td.tk-k-link:empty,
  .tk-tbl td.tk-k-fu:empty {
    display: none;
  }
  .tk-tbl td.tk-k-link .tk-linkchip {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tk-fu,
  .tk-add,
  .tk-linkchip {
    background: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: normal;
    text-align: left;
  }
  .tk-fu .tk-add {
    min-height: 0;
  }
  .tk-tbl td.tk-k-job .tk-jobchip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none;
  }
  .tk-st,
  .tk-tbl td.tk-k-status .sel,
  .tk-tbl td.tk-k-status .tk-st {
    min-height: 44px;
  }
  .tk-tbl td.tk-k-due .tk-date,
  .tk-tbl td.tk-k-due .sel-date {
    min-height: 44px;
  }
  .tk-mini {
    min-width: 44px;
    min-height: 44px;
  }
  .tk-rc {
    width: 44px;
    height: 44px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    position: relative;
  }
  .tk-rc::after {
    content: none;
  }
  .tk-rc::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--faint);
    background: var(--card);
  }
  .tk-rc.on::before {
    background: var(--ok);
    box-shadow: none;
  }
  .tk-rc svg {
    position: relative;
    z-index: 1;
  }
  .tk-tbl td.tk-act .tk-ico {
    min-width: 44px;
    min-height: 44px;
  }
  .tbl-cards .tk-title {
    min-height: 44px;
    padding: 10px 0;
    display: inline-flex;
    align-items: center;
  }
  /* job Tasks tab as cards (tbl-cards): the status select and the due date fill the row */
  .tbl-cards td[data-label='Status'] .sel,
  .tbl-cards td[data-label='Status'] .tk-st {
    min-height: 44px;
  }
}

/* F7C1: ghost toolbar, pale status chip, bordered trash, tinted board headers, and the real app's compact phone card (app.js:75593). */
.tk-fx {
  display: contents;
}
.tk-selbtn {
  display: none;
}
.tk-duem {
  display: none;
}
.tk-tbl .tk-st {
  background: var(--neutral);
  border-color: transparent;
  min-width: 0;
  font-size: 12px;
}
.tk-tbl .tk-st.st-1 {
  background: var(--info-bg);
}
.tk-tbl .tk-st.st-2 {
  background: var(--risk-bg);
}
.tk-tbl .tk-st.st-3 {
  background: var(--ok-bg);
}
.tk-tbl td.tk-act .tk-danger {
  border: 1px solid var(--input);
  color: var(--risk);
}
.tk-tbl td.tk-act .btn-ok {
  min-height: 32px;
  padding: 0 14px;
}
.tk-cd {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  margin-right: 7px;
}
.tk-col header {
  margin: -10px -10px 8px;
  padding: 8px 10px;
  border-radius: 6px 6px 0 0;
  align-items: center;
}
.tk-col-1 header {
  background: var(--info-bg);
}
.tk-col-1 .tk-cd {
  background: var(--accent);
}
.tk-col-2 header {
  background: var(--risk-bg);
}
.tk-col-2 .tk-cd {
  background: var(--risk);
}
.tk-col-3 header {
  background: var(--ok-bg);
}
.tk-col-3 .tk-cd {
  background: var(--ok);
}
@media (max-width: 768px) {
  .tk-selbtn {
    display: inline-flex;
  }
  .tk-fs {
    justify-content: flex-end;
  }
  .tk-bar h2 {
    margin-left: 0;
  }
  .tk-fx {
    display: none;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    order: 9;
  }
  .tk-fx.open {
    display: flex;
  }
  .tk-top > .tk-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .tk-top > .tk-chips .tk-sjob {
    flex: 0 0 auto;
    min-height: 0;
  }
  /* the card: check, title (two lines), overdue text; then flames, job chip, status chip and the one "..." menu */
  .tk-tbl tr.tk-row {
    padding: 6px 12px 10px 4px;
    gap: 2px 6px;
    align-items: center;
  }
  .tk-tbl tr.tk-row td.tk-c {
    align-self: flex-start;
    height: 44px;
  }
  .tk-tbl tr.tk-row td.tk-name {
    flex: 1 1 calc(100% - 150px);
    align-self: flex-start;
  }
  .tk-title {
    padding: 10px 0 2px;
  }
  .tk-tbl tr.tk-row td.tk-k-due {
    flex: 0 0 90px;
    align-self: flex-start;
    margin-left: 0;
    text-align: right;
    padding-top: 12px;
  }
  .tk-tbl tr.tk-row td.tk-k-due .tk-date,
  .tk-tbl tr.tk-row td.tk-k-link,
  .tk-tbl tr.tk-row td.tk-k-fu,
  .tk-tbl tr.tk-row td.tk-act .tk-danger,
  .tk-tbl tr.tk-row td.tk-act .btn-ok {
    display: none;
  }
  .tk-tbl tr.tk-row td.tk-k-due .tk-over,
  .tk-tbl tr.tk-row td.tk-k-due .tk-duem {
    display: block;
    font-size: 12px;
  }
  .tk-tbl tr.tk-row td.tk-k-due .tk-duem {
    color: var(--muted);
  }
  .tk-tbl tr.tk-row td.tk-k-prio {
    margin-left: 50px;
    order: 3;
  }
  .tk-tbl tr.tk-row td.tk-k-prio .tk-fl {
    min-width: 30px;
    min-height: 36px;
    padding: 0 2px;
  }
  .tk-tbl tr.tk-row td.tk-k-prio .tk-flsvg {
    width: 20px;
    height: 20px;
  }
  .tk-tbl tr.tk-row td.tk-k-job {
    order: 4;
    margin-left: 0;
  }
  .tk-tbl tr.tk-row td.tk-k-status {
    order: 5;
    margin-left: 50px;
  }
  .tk-tbl tr.tk-row td.tk-k-job .tk-jobchip {
    min-height: 32px;
    background: var(--neutral);
    border: 0;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 12px;
  }
  .tk-tbl tr.tk-row td.tk-k-status .tk-st {
    min-height: 32px;
    min-width: 0;
    border-radius: 4px;
    font-size: 12px;
    padding: 0 8px;
  }
  .tk-tbl tr.tk-row td.tk-act {
    order: 6;
    margin-left: auto;
  }
  .tk-tbl tr.tk-row td.tk-act .tk-ico {
    min-width: 40px;
    min-height: 36px;
    border: 1px solid var(--input);
  }
  .tk-tbl tr.tk-row td.tk-k-prio {
    margin-left: 44px;
    flex: 0 0 78px;
    width: 78px;
    min-width: 0;
  }
  .tk-tbl tr.tk-row td.tk-k-prio .tk-fl {
    min-width: 26px;
  }
  .tk-tbl tr.tk-row td.tk-k-status .tk-st .ic,
  .tk-tbl tr.tk-row td.tk-k-status .tk-st svg {
    display: none;
  }
  .tk-tbl tr.tk-row td.tk-k-job .tk-jobchip {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* F8E: the job Tasks tab (filters in the card head, check column) on phones. */
.tk-jcard .card-head .right .tk-jsel {
  min-width: 140px;
}
@media (max-width: 768px) {
  .tk-jcard .card-head {
    flex-wrap: wrap;
  }
  .tk-jcard .card-head .right {
    width: 100%;
    margin-left: 0;
  }
  .tk-jcard .card-head .right .tk-jsel {
    flex: 1 1 140px;
    min-height: 44px;
    font-size: 16px;
  }
  .tk-jcard .card-body.flush {
    padding: 10px;
  }
  .tbl.tbl-cards.tk-jtbl tr.tk-row {
    position: relative;
    padding-left: 56px;
  }
  .tbl.tbl-cards.tk-jtbl td.tk-c {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 48px;
    padding: 0;
    border: 0;
    display: block;
  }
  .tbl.tbl-cards.tk-jtbl td:nth-child(2) {
    order: -1;
    display: block;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    padding: 0 0 8px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--hair);
    min-height: 44px;
  }
  .tbl.tbl-cards.tk-jtbl td:nth-child(2)::before {
    content: none;
  }
}
@media (max-width: 768px) {
  .tk-jtbl td[data-label='Owner'] .tiny {
    display: none;
  }
}

/* F9B: the job pop-up's color dot stays a dot (demo.css:1738 stretches every span in a pop row). */
.pop .pop-row.pop-row > span.tk-dot {
  flex: 0 0 8px;
  width: 8px;
}

/* F9B: phone tap targets reach 44 px by a bigger hit area, so the compact card looks the same.
   Flames get real 44 px cells (three of them side by side cannot share an overlay); the job chip,
   status chip and "..." menu keep their look and grow an invisible ::after box, with enough row gap
   that no two boxes overlap. */
@media (max-width: 768px) {
  .tk-tbl tr.tk-row {
    row-gap: 14px;
  }
  .tk-tbl tr.tk-row td.tk-k-prio {
    flex: 0 0 132px;
    width: 132px;
    margin-left: 20px;
  }
  .tk-tbl tr.tk-row td.tk-k-prio .tk-fl {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .tk-tbl tr.tk-row td.tk-k-job .tk-jobchip,
  .tk-tbl tr.tk-row td.tk-k-status .tk-st {
    /* overflow is clipped on these two, so the hit area is a transparent border, not a pseudo box */
    box-sizing: content-box;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    background-clip: padding-box;
    margin-block: -6px;
  }
  .tk-tbl tr.tk-row td.tk-act .tk-ico {
    position: relative;
  }
  .tk-tbl tr.tk-row td.tk-act .tk-ico::after {
    content: '';
    position: absolute;
    inset: -6px 0;
  }
}

/* F10B3: the phone card laid out like the real one (app.js:75593 m-task-card): check, title and overdue text on top; the flames
   under the title, aligned with it; the job and status chips on one row beneath; the "..." menu bordered at the right under the
   overdue text. No margins push anything to the middle, no empty rows are left under the menu, every control stays 44 px. */
@media (max-width: 768px) {
  .tk-tbl tr.tk-row {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: 'c name name due' '. prio prio act' '. job status status' '. link fu fu' '. own own own';
    column-gap: 6px;
    row-gap: 0;
    padding: 4px 12px 8px 4px;
  }
  .tk-tbl tr.tk-row td.tk-k-prio {
    width: auto;
    margin: 0;
    justify-self: start;
    align-self: center;
  }
  .tk-tbl tr.tk-row td.tk-k-job,
  .tk-tbl tr.tk-row td.tk-k-status {
    margin: 0;
    padding: 6px 0;
    justify-self: start;
    min-width: 0;
  }
  .tk-tbl tr.tk-row td.tk-k-status {
    max-width: 100%;
  }
  .tk-tbl tr.tk-row td.tk-k-due {
    align-self: start;
    justify-self: end;
  }
  .tk-tbl tr.tk-row td.tk-act {
    align-self: center;
    justify-self: end;
    margin: 0;
  }
  .tk-tbl tr.tk-row td.tk-act .tk-ico {
    min-width: 44px;
    min-height: 44px;
  }
  .tk-tbl tr.tk-row td.tk-act .tk-ico::after {
    content: none;
  }
  /* F10B3: a one-line task title is still a 44 px target (the padding is part of the button, so the look is the same) */
  .tk-tbl tr.tk-row .tk-title {
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 0 2px;
  }
  /* F10B3: the owner and filter chip close buttons keep their 32 px look and grow an invisible 44 px box */
  .tk-fchip button {
    position: relative;
  }
  .tk-fchip button::after {
    content: '';
    position: absolute;
    inset: -6px;
  }
}