/* Tasks — Task Manager + Crew Manager (Figma TASKS). Thin lines, colour only for meaning:
   red filled shield = Critical, red outline = Major, grey = Normal, green = Finished / Active. */
.tk { max-width: 720px; margin: 0 auto; padding: 0 0 32px; }

/* Tasks | Crew — one bar that never moves: same place and width in both tabs, ink only (no colour),
   a 2px underline that slides between them, labels that reserve their bold width so nothing shifts. */
.tk-tabs { position: sticky; top: 0; z-index: 3; }

/* Search + new + archive */
.tk-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.tk-search { flex: 1; height: 44px; }
.tk-iconbtn { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--color-surface); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); color: var(--color-ink); text-decoration: none; }
.tk-iconbtn svg { width: 20px; height: 20px; }
.tk-iconbtn__n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--color-field); box-shadow: 0 0 0 var(--hairline) var(--color-line-strong); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: var(--color-ink-2); }
.tk-bar--archive { padding-top: 16px; }
/* The bar earns its pieces: 0 tasks → no bar (the hero has Create); 1–5 → just "+" (and Archive once something is archived); 6+ → search too */
.tk--tasks.is-empty .tk-bar { display: none; }

/* Task cards */
.tk-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.tk-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 12px 16px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); color: var(--color-ink); text-decoration: none; transition: box-shadow .16s ease, transform .16s ease; }
.tk-card.is-open { box-shadow: 0 0 0 1.5px var(--btn-brand-line), 0 8px 24px rgba(17, 17, 28, 0.07); }
.tk-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-card__title { font-size: 16px; line-height: 21px; overflow-wrap: anywhere; }
.tk-card__by, .tk-strip__by { margin-top: 2px; font-size: 13px; color: var(--color-ink-muted); }
.tk-name { color: var(--color-ink); font-weight: 700; font-size: inherit; padding: 0; }
.tk-card__quote { margin-top: 12px; font-size: 14px; line-height: 20px; font-style: italic; color: var(--color-ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-card__time { margin-top: 6px; font-size: 12px; color: var(--color-ink-muted); }
.tk-card mark, .tk-card__quote mark { background: var(--btn-brand-bg); color: inherit; border-radius: 3px; }
.tk-card__side { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.tk-card.has-unread .tk-card__title { font-weight: 700; }
.tk-unread { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--color-badge); color: var(--color-on-badge); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }

/* Priority pills */
.tk-pri { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.tk-pri small { font: inherit; }
.tk-pri__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tk-pri__ic { width: 12px; height: 12px; }
.tk-pri--critical { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 45%, transparent); }
.tk-pri--major { color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warn) 45%, transparent); }
.tk-pri--normal { color: var(--color-ink-muted); background: var(--color-field); }
.tk-pri--finished { color: var(--color-positive); background: var(--btn-pos-bg); box-shadow: inset 0 0 0 1px var(--btn-pos-line); }

.tk-empty { padding: 48px 24px; }
.tk-empty__cta, .tk-fan .pf-btn { display: inline-flex; width: auto; margin-top: 16px; padding: 0 22px; }
.tk-nomatch { margin: 24px 16px; text-align: center; font-size: 14px; color: var(--color-ink-muted); }
.tk-none { padding: 64px 24px; }

/* One task */
.tk-thread { display: flex; flex-direction: column; min-height: 100%; background: var(--color-bg); }
.tk-thread__meta { display: flex; }
.tk-thread__head { display: flex; align-items: center; gap: 8px; padding: 16px 10px 2px 20px; background: var(--color-surface); }
.tk-thread__head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 24px; }
.tk-more svg { width: 22px; height: 22px; }
.tk-strip { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--color-surface); border-bottom: var(--hairline) solid var(--color-line); }
.tk-strip .tk-pri { height: 26px; font-size: 12px; }
.tk-strip__by { margin: 0; }
.tk-chat { flex: 1; }
.tk-msg__av { flex: none; padding: 0; border-radius: 50%; }
.tk-archfoot { position: sticky; bottom: 0; margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: var(--hairline) solid var(--color-line); text-align: center; }
.tk-archfoot p { margin: 0 0 10px; font-size: 13px; color: var(--color-ink-muted); }
.tk-archfoot__btns { display: flex; justify-content: center; gap: 10px; }
.tk-archfoot__btn { height: 44px; min-width: 120px; justify-content: center; }
.tk-danger-text { color: var(--color-danger); }

/* Phone page for one task */
.screen--task .screen-bar--custom { grid-template-columns: var(--tap) 1fr var(--tap) 0; }
.screen--task .screen-bar__title { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen--task .screen-inner { max-width: 720px; padding: 0; }
.tk-page { min-height: 100%; }
.screen--task .tk-thread { min-height: calc(100dvh - 64px); }
.screen--tk .screen-inner { max-width: 720px; padding: 0; }

/* Sheets: create task, settings, availability */
.tk-form { display: flex; flex-direction: column; gap: 16px; }
.tk-form .fld textarea { min-height: 120px; }
.tk-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tk-level { height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--color-surface); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); transition: box-shadow .15s ease, background-color .15s ease; }
.tk-level .tk-pri--normal { background: transparent; }
.tk-level[aria-checked="true"] { background: var(--btn-brand-bg); box-shadow: inset 0 0 0 1.5px var(--btn-brand-line); }
.tk-form__go { margin-top: 4px; }
.tk-settings { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.tk-switchrow { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 14px; margin-bottom: 4px; border-bottom: var(--hairline) solid var(--color-line); cursor: pointer; }
.tk-switchrow > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tk-switchrow b { font-size: 15px; }
.tk-switchrow small { font-size: 13px; color: var(--color-ink-muted); }

.tk-radios { display: flex; flex-direction: column; gap: 6px; }
.tk-radio { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px; border-radius: 12px; text-align: left; color: var(--color-ink); }
.tk-radio > .tk-dot { grid-row: 1 / 3; }
.tk-radio > span:not(.radio):not(.tk-dot) { font-size: 15px; font-weight: 700; }
.tk-radio small { grid-column: 2; font-size: 13px; color: var(--color-ink-muted); }
.tk-radio .radio { grid-column: 3; grid-row: 1 / 3; }
.tk-radio[aria-checked="true"] { background: var(--color-hover); }
.tk-dialog .tk-radio { grid-template-columns: 1fr auto; }
.tk-dialog .tk-radio small { grid-column: 1; }
.tk-dialog .tk-radio .radio { grid-column: 2; }
@media (hover: hover) { .tk-radio:hover { background: var(--color-hover); } }

/* Centred questions (role, delete) */
.fsheet.tk-center { align-items: center; }
.tk-center .dsheet__panel { max-width: 360px; margin: 16px; }
.tk-dialog { padding: 22px 20px 18px; text-align: center; }
.tk-dialog__title { margin: 0; font-size: 18px; line-height: 24px; }
.tk-dialog__text { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--color-ink-muted); }
.tk-dialog .tk-radios { margin-top: 14px; text-align: left; }
.tk-dialog__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.tk-dialog__btn { height: 46px; justify-content: center; border-radius: 12px; font-size: 15px; font-weight: 700; }
.tk-btn-danger { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 70%, transparent); }

/* Crew */
.tk-crew { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.tk-crew__me, .tk-crew__all { display: flex; flex-direction: column; gap: 12px; }
.tk-member { padding: 14px 12px 12px 14px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); }
.tk-member.is-me { box-shadow: 0 0 0 var(--hairline) var(--color-line-strong); }
.tk-member__head { display: flex; align-items: flex-start; gap: 8px; }
.tk-member__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; color: inherit; }
.tk-member__av { width: 52px; height: 52px; }
.tk-member__who > span:not(.dx-av) { min-width: 0; display: flex; flex-direction: column; }
.tk-member__who b { font-size: 16px; line-height: 21px; }
.tk-member__who small { font-size: 13px; line-height: 17px; color: var(--color-ink-muted); }
.tk-member__role { font-style: italic; }
.tk-member .tk-more { width: 36px; height: 36px; border-radius: 10px; background: var(--color-field); }
.tk-member .tk-more svg { width: 18px; height: 18px; }
.tk-member__status { margin: 12px 0 0; font-size: 15px; line-height: 21px; white-space: pre-line; overflow-wrap: anywhere; }
.tk-member__status.is-empty { color: var(--color-ink-muted); }
.tk-member__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.tk-member__foot small { font-size: 12px; color: var(--color-ink-muted); }
.tk-avail { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 99px; font-size: 13px; color: var(--color-ink-2); }
.tk-avail svg { width: 14px; height: 14px; color: var(--color-ink-muted); }
button.tk-avail { box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); }
.tk-avail.is-static { padding: 0; height: auto; }
.tk-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--color-ink-muted); }
.tk-dot--active { background: var(--color-positive); }
.tk-dot--busy { background: var(--color-danger); }
.tk-dot--offline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-ink-muted); }

.tk-newstatus { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--color-surface); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); font-size: 15px; color: var(--color-ink-muted); text-align: left; }
.tk-newstatus svg { width: 18px; height: 18px; color: var(--color-ink-2); }
.tk-crew__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.tk-crew__head h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.tk-crew__head h2 small { font-size: 14px; color: var(--color-ink-muted); }
.tk-addcrew { height: 40px; background: var(--color-surface); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); }
.tk-addcrew svg { width: 18px; height: 18px; color: var(--color-accent); }
.tk-members { display: flex; flex-direction: column; gap: 12px; }

/* New status page */
.screen--tkform .screen-bar--custom { grid-template-columns: var(--tap) 1fr auto; }
.screen--tkform .screen-bar__title { text-align: left; }
.tk-barbtn { height: 36px; background: var(--btn-brand-bg); color: var(--btn-brand-ink); box-shadow: inset 0 0 0 1px var(--btn-brand-line); }
.tk-barbtn:disabled { background: var(--color-field); color: var(--color-ink-muted); box-shadow: none; }
.tk-statusbox { width: 100%; min-height: 220px; padding: 20px 16px; border: 0; background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 18px; line-height: 26px; resize: none; outline: none; border-bottom: var(--hairline) solid var(--color-line); }
.tk-statusbox::placeholder { color: var(--color-ink-muted); }
.tk-statusnote { margin: 12px 16px; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }

/* Badge on the Tasks tab (same look as Offerbox) */
.nav-item[data-tab="tasks"], .side-link[data-tab="tasks"] { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .tk-card:not(.is-open):hover { box-shadow: 0 0 0 var(--hairline) var(--color-line-strong), 0 8px 24px rgba(17, 17, 28, 0.07); transform: translateY(-1px); }
  .tk-name:is(button):hover, .tk-member__who:hover b { text-decoration: underline; }
  .tk-iconbtn:hover, .tk-addcrew:hover, .tk-newstatus:hover { background: var(--color-hover); }
}

@media (min-width: 1024px) {
  /* Same frame for both tabs: the bar and the page width never change when you switch */
  .tk { max-width: var(--page-w); padding: 28px var(--page-pad) 48px; }
  .tk-tabs { position: relative; margin-bottom: 6px; }
  .tk__body { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .tk--crew .tk__body { display: block; }
  .tk__side .tk-bar { padding: 14px 0 12px; }
  .tk__side .tk-list { padding: 0; }
  .tk__main { position: sticky; top: 16px; margin-top: 14px; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 18px; box-shadow: 0 0 0 var(--hairline) var(--color-line), 0 10px 32px rgba(17, 17, 28, 0.05); background: var(--color-surface); }
  .tk__main:empty { display: none; }
  .tk__main .tk-thread { min-height: calc(100dvh - 120px); }
  .tk__main .tk-strip { top: 0; padding: 8px 20px 14px; }
  /* Crew: you on the left (same column width as the task list), the crew on the right in two columns */
  .tk-crew { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 0 0; }
  .tk-crew__me { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
  .tk-crew__all .tk-crew__head { margin-top: 0; min-height: 48px; }
  .tk-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  .tk--fan .tk__body { display: block; }
  /* Nothing yet: the bar keeps its place, the empty state becomes the page */
  .tk--tasks.is-empty .tk__body { display: block; }
  .tk--tasks.is-empty .tk__side .tk-bar { max-width: 420px; }

  .tk--tasks.is-empty .tk-empty { padding-top: clamp(24px, 9vh, 110px); }
  .tk-crew.is-alone { display: block; }
  .tk-crew.is-alone .tk-crew__me { position: static; max-width: 420px; margin: 0 auto; }
  .tk-crew.is-alone .tk-crew__all { margin-top: 8px; }
  .tk-crew.is-alone .tk-crew__head { display: none; }
  .tk-crew.is-alone .tk-empty { padding-top: clamp(16px, 5vh, 56px); }
}

/* Switching Tasks ⇄ Crew: the content below the bar glides in (the bar itself never moves) */
.tk__body.is-anim { animation: tk-body-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tk-body-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Availability: the same quiet language as the rest of the app — a small dot with a soft halo, text in ink */
.tk-dot { width: 8px; height: 8px; }
.tk-dot--active { background: var(--color-positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-positive) 18%, transparent); }
.tk-dot--busy { background: var(--color-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warn) 18%, transparent); }
.tk-avail { gap: 8px; color: var(--color-ink); font-weight: 600; }
button.tk-avail { padding: 0 8px 0 12px; }
.tk-avail.is-static { font-weight: 500; color: var(--color-ink-2); }

/* Crew avatars never squash, whatever the text next to them does */
.tk-member__av { flex: none; }
.tk-member__av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No top bar on Tasks: the Tasks | Crew bar sits right at the top, no gap above it */
@media (max-width: 1023px) { body.no-header .tk-tabs { margin-top: -14px; } }
/* Amber dot reads warm, not muddy, on both themes */
.tk-dot--busy { background: #F2A33A; box-shadow: 0 0 0 3px rgba(242, 163, 58, 0.2); }

/* ---------- Decisions: one sentence the whole crew confirms ---------- */
.tk-dadd { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); height: 44px; margin: 4px 16px 8px; border-radius: 12px; box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); color: var(--color-ink-2); font-size: 14px; font-weight: 600; background: var(--color-surface); }
.tk-dadd svg { width: 16px; height: 16px; }
.tk-dec { margin: 4px 16px 10px; padding: 14px 16px 12px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line-strong); }
.tk-dec.is-done { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-positive) 45%, transparent); }
.tk-dec__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-dec__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); }
.tk-dec__label svg { width: 14px; height: 14px; }
.tk-dec.is-done .tk-dec__label { color: var(--color-positive); }
.tk-dec__state { font-size: 13px; font-weight: 600; color: var(--color-ink-2); }
.tk-dec.is-done .tk-dec__state { color: var(--color-positive); }
.tk-dec__text { margin: 10px 0 12px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.tk-dec__people { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-dp { position: relative; flex: none; }
.tk-dp .dx-av { width: 32px; height: 32px; font-size: 11px; opacity: .4; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.tk-dp.is-ok .dx-av { opacity: 1; filter: none; }
.tk-dp i { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--color-positive); color: #FFFFFF; box-shadow: 0 0 0 2px var(--color-surface); }
.tk-dp i svg { width: 9px; height: 9px; }
.tk-dec__by { margin: 10px 0 0; font-size: 12px; line-height: 17px; color: var(--color-ink-muted); }
.tk-dec__prev { margin: 4px 0 0; font-size: 12px; color: var(--color-ink-muted); text-decoration: line-through; }
.tk-dec__acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tk-dec__ok { flex: 1; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.tk-dec__ok svg { width: 16px; height: 16px; }
.tk-dec__mine { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-positive); }
.tk-dec__mine svg { width: 15px; height: 15px; }
.tk-dec__change { flex: none; height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; color: var(--color-ink-2); }
.tk-dec.is-done .tk-dec__acts { justify-content: flex-end; margin-top: 4px; }
.tk-dec.is-done .tk-dec__change { height: 32px; font-size: 13px; color: var(--color-ink-muted); }
.tk-dform__hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.tk-dform__hint svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.tk-sys { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 24px; text-align: center; font-size: 12px; line-height: 17px; color: var(--color-ink-muted); }
.tk-sys svg { width: 13px; height: 13px; color: var(--color-positive); }
.tk-sys small { font-size: 11px; opacity: .8; }
.tk-card__dec { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--color-ink-2); }
.tk-card__dec svg { width: 13px; height: 13px; }
.tk-card__dec.is-done { color: var(--color-positive); }
@media (hover: hover) { .tk-dadd:hover, .tk-dec__change:hover { color: var(--color-ink); } }
/* Pinned under the task strip: one line until you open it */
.tk-dec { position: sticky; top: 0; z-index: 2; padding: 0; overflow: hidden; }
.tk-dec__head { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 14px 0 16px; text-align: left; color: inherit; }
.tk-dec__state { margin-left: auto; }
.tk-dec__chev { flex: none; width: 16px; height: 16px; color: var(--color-ink-muted); transition: transform .2s ease; }
.tk-dec.is-open .tk-dec__chev { transform: rotate(180deg); }
.tk-dec__text { margin: 6px 16px 12px; font-size: 15px; line-height: 21px; }
.tk-dec:not(.is-open) .tk-dec__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-dec.is-open .tk-dec__text { font-size: 17px; line-height: 24px; margin-top: 10px; }
.tk-dec__more { display: none; padding: 0 16px 12px; }
.tk-dec.is-open .tk-dec__more { display: block; }
.tk-dec__ok--mini { display: flex; width: calc(100% - 32px); margin: -2px 16px 12px; height: 40px; }
.screen--task .tk-dec { top: 0; }
/* Strip + decision travel together, pinned at the top of the conversation */
.tk-pin { position: sticky; top: 0; z-index: 3; background: var(--color-bg); padding-bottom: 2px; }
.tk-pin .tk-strip { position: static; }
.tk-pin .tk-dec { position: static; margin-top: 8px; box-shadow: 0 0 0 var(--hairline) var(--color-line-strong), 0 6px 16px rgba(17, 17, 28, 0.06); }
.tk-pin .tk-dec.is-done { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-positive) 45%, transparent), 0 6px 16px rgba(17, 17, 28, 0.06); }
.tk-pin .tk-dadd { margin-top: 8px; }

/* Importance speaks the same quiet language as crew availability: a dot with a soft halo + ink text, no coloured pill */
.tk-pri { height: auto; padding: 0; gap: 8px; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--color-ink) !important; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.tk-pri__dot { width: 8px; height: 8px; flex: none; }
.tk-pri--critical .tk-pri__dot { background: #FF5B5D; box-shadow: 0 0 0 3px rgba(255, 91, 93, 0.2); }
.tk-pri--major .tk-pri__dot { background: #F2A33A; box-shadow: 0 0 0 3px rgba(242, 163, 58, 0.2); }
.tk-pri--normal .tk-pri__dot { background: var(--color-ink-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink-muted) 18%, transparent); }
.tk-pri--normal { color: var(--color-ink-2) !important; }
.tk-pri--finished { color: var(--color-ink-2) !important; }
.tk-pri--finished .tk-pri__ic { color: var(--color-positive); }
.tk-strip .tk-pri { height: auto; font-size: 13px; }
.tk-card__side .tk-pri { margin-top: 3px; }

/* ---------- Desktop conversation, 22 Oct: no box ----------
   The title and its buttons share one line; the conversation starts on that line and runs to the bottom of the screen,
   right on the page. One thin glowing line separates the list from the conversation. At the bottom: a glowing field and Send. */
@media (min-width: 1024px) {
  .tk .tk-head { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; }
  .tk .tk-head h1 { flex: 1; min-width: 0; }
  .tk-head__acts { display: flex; gap: 8px; }
  .tk--tasks.is-empty .tk-head__acts { display: none; }   /* nothing yet: the hero's Create is the one button */
  .tk--tasks { padding-bottom: 0; }
  .tk--tasks .tk__body { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); column-gap: 0; align-items: start; }
  .tk--tasks .tk__side { padding: 0 28px 48px 0; }
  .tk--tasks .tk__side .tk-bar:not(:has(.tk-search:not([hidden]), .tk-newrow)) { display: none; }
  .tk--tasks .tk__side .tk-listbox { margin-top: 16px; }
  .tk__main { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; max-height: none; margin-top: -52px; padding: 52px 0 0 28px; overflow: hidden;
    border-radius: 0; box-shadow: none; background: none; }
  .tk__main .tk-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; background: none; }
  .tk__main .tk-thread__head { padding: 0 0 4px; min-height: 44px; background: none; }
  .tk__main .tk-thread__head h2 { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; }
  .tk__main .tk-pin { position: static; background: none; }
  .tk__main .tk-strip { padding: 0 0 14px; background: none; }
  .tk__main .tk-chat { flex: 1; min-height: 0; background: none; }
  .tk__main .ob-chat__list { overflow-y: auto; overscroll-behavior: contain; padding: 16px 4px 16px 0; }
  .tk__main .tk-archfoot { padding-bottom: 24px; }
}

/* the glowing divider and the glowing field: shared by Tasks and Chat on desktop */
@media (min-width: 1024px) {
  .tk__main::before, .ch__main::before { content: ''; position: absolute; left: 0; top: 52px; bottom: 28px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 22%, color-mix(in srgb, var(--color-accent) 70%, transparent) 78%, transparent);
    box-shadow: 0 0 12px 0.5px color-mix(in srgb, var(--color-accent) 45%, transparent); opacity: .75; }
  .tk__main .ob-compose, .ch__main .ob-compose { position: static; align-items: flex-end; gap: 10px; padding: 12px 0 24px; background: none; border-top: 0; }
  .tk__main .ob-compose textarea, .ch__main .ob-compose textarea { min-height: 48px; padding: 13px 20px; border-radius: 24px; background: var(--color-surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 32%, var(--color-line)), 0 0 24px -6px color-mix(in srgb, var(--color-accent) 45%, transparent);
    transition: box-shadow .2s ease; }
  .tk__main .ob-compose textarea:focus, .ch__main .ob-compose textarea:focus { outline: none;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 75%, transparent), 0 0 32px -4px color-mix(in srgb, var(--color-accent) 60%, transparent); }
  .tk__main .ob-send, .ch__main .ob-send { width: 48px; height: 48px; background: var(--color-accent); color: var(--color-on-accent);
    box-shadow: 0 0 22px -4px color-mix(in srgb, var(--color-accent) 80%, transparent); transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; }
  .tk__main .ob-send:disabled, .ch__main .ob-send:disabled { background: var(--color-field); color: var(--color-ink-muted); box-shadow: none; }
  .tk__main .ob-send:not(:disabled):active, .ch__main .ob-send:not(:disabled):active { transform: scale(.94); }
}

/* ---------- Crew, 22 Oct: same frame as Tasks — no boxes, one glowing line, planned for day 1 / 2 / 7 / 30 ---------- */
.cm .tk-crew__me, .cm .tk-crew__all { gap: 0; }
.cm-av { flex: none; width: 48px; height: 48px; font-size: 16px; }
.cm-av--lg { width: 64px; height: 64px; font-size: 20px; }
.cm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-more { flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--color-ink-2); }
.cm-more svg { width: 18px; height: 18px; }
@media (hover: hover) { .cm-more:hover { background: var(--color-hover); } }

/* you */
.cm-me { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 20px; }
.cm-me__top { display: flex; align-items: center; gap: 8px; }
.cm-me__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0; text-align: left; color: inherit; }
.cm-me__who > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-me__who b { font-size: 18px; line-height: 23px; font-weight: 800; letter-spacing: -.01em; }
.cm-me__who small { font-size: 13.5px; line-height: 18px; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: var(--color-field); }
.cm-seg button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--color-ink-muted); transition: background-color .15s ease, color .15s ease; }
.cm-seg button[aria-checked="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(17, 17, 28, 0.1), 0 0 0 var(--hairline) var(--color-line); }
.cm-seg button[aria-checked="false"] .tk-dot { opacity: .45; box-shadow: none; }
.cm-me__status { margin: 0; font-size: 17px; line-height: 25px; white-space: pre-line; overflow-wrap: anywhere; }
.cm-me__status small { font-size: 12.5px; color: var(--color-ink-muted); white-space: nowrap; }
.cm-me__status.is-empty { font-size: 15px; color: var(--color-ink-muted); }
.cm-write { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 24px; background: var(--color-surface); color: var(--color-ink-muted); font-size: 15px; text-align: left;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, var(--color-line)), 0 0 22px -8px color-mix(in srgb, var(--color-accent) 45%, transparent); transition: box-shadow .2s ease; }
.cm-write svg { width: 16px; height: 16px; color: var(--color-accent); }
@media (hover: hover) { .cm-write:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 0 28px -6px color-mix(in srgb, var(--color-accent) 55%, transparent); } }
.cm-me .tk-member__busy { margin: 0; }
.cm .iv-wc { margin-top: 4px; }

/* the crew */
.cm-head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.cm-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; }
.cm-head h2 small { margin-left: 4px; font-size: 15px; font-weight: 600; color: var(--color-ink-muted); }
.cm-add { flex: none; height: 40px; gap: 8px; padding: 0 16px; border-radius: 20px; background: var(--btn-brand-bg); color: var(--btn-brand-ink); box-shadow: inset 0 0 0 1px var(--btn-brand-line); font-weight: 700; }
.cm-add svg { width: 16px; height: 16px; }
.cm-search { margin-top: 10px; }
.cm-chips { margin-top: 12px; }
.cm-list { flex: none; display: flex; flex-direction: column; margin-top: 6px; }
.cm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; }
.cm-row + .cm-row { border-top: var(--hairline) solid var(--color-line); }
.cm-row__who { position: relative; padding: 0; }
.cm-live { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--color-bg); background: var(--color-ink-muted); }
.cm-live--active { background: var(--color-positive); }
.cm-live--busy { background: #F2A33A; }
.cm-row__txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.cm-row__top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 0; }
.cm-row__name { padding: 0; font-size: 16px; line-height: 21px; font-weight: 700; color: var(--color-ink); text-align: left; }
.cm-row__top small { font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.cm-row__status { margin: 0; font-size: 15px; line-height: 21px; color: var(--color-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.cm-row .tk-member__busy { margin: 2px 0 0; }
.cm-row__side { display: flex; align-items: center; gap: 4px; }
.cm-row__side small { font-size: 12px; color: var(--color-ink-muted); white-space: nowrap; }
@media (hover: hover) { .cm-row__name:hover { text-decoration: underline; } }
.cm-none { margin: 16px 0; font-size: 15px; color: var(--color-ink-muted); }
.cm-wait { margin: 6px 0 0; max-width: 52ch; font-size: 15px; line-height: 22px; color: var(--color-ink-muted); }
/* invites waiting: a section of the list, not a box */
.cm .iv-pending { margin-top: 18px; padding: 14px 0 0; border-radius: 0; box-shadow: none; background: none; border-top: var(--hairline) solid var(--color-line); }
.cm .iv-pending h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); }
.cm .iv-item__ic { width: 48px; height: 48px; border: 1.5px dashed var(--color-line-strong); background: none; }
.cm .iv-item { gap: 14px; min-height: 68px; }

/* phones: you on top, a glowing line, then the crew */
@media (max-width: 1023px) {
  .tk-crew.cm { padding: 8px 16px 24px; gap: 0; }
  .cm .tk-crew__all { position: relative; padding-top: 22px; }
  .cm .tk-crew__all::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 25%, color-mix(in srgb, var(--color-accent) 70%, transparent) 75%, transparent);
    box-shadow: 0 0 12px 0.5px color-mix(in srgb, var(--color-accent) 45%, transparent); opacity: .75; }
  .cm.is-alone .cm-hero { padding: 28px 8px 8px; }
  .cm .tk-crew__me, .tk-crew.cm.is-alone .tk-crew__me { width: 100%; max-width: none; margin: 0; }
  .cm-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .cm-row__side small { display: none; }
  .cm-row__when { display: block; margin-top: 2px; font-size: 12px; color: var(--color-ink-muted); }
}
@media (min-width: 1024px) { .cm-row__when { display: none; } }

@media (min-width: 1024px) {
  .tk-crew.cm, .tk-crew.cm.is-alone { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0; align-items: start; padding: 0; }
  .cm .tk-crew__me { position: sticky; top: 28px; padding: 0 28px 48px 0; }
  .cm .tk-crew__me .tk-head { margin-bottom: 18px; }
  .tk-crew.cm.is-alone .tk-crew__me { max-width: none; margin: 0; }
  .cm .tk-crew__all { position: relative; min-height: calc(100dvh - 52px); padding: 0 0 48px 32px; }
  .cm .tk-crew__all::before { content: ''; position: absolute; left: 0; top: 0; bottom: 28px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 22%, color-mix(in srgb, var(--color-accent) 70%, transparent) 78%, transparent);
    box-shadow: 0 0 12px 0.5px color-mix(in srgb, var(--color-accent) 45%, transparent); opacity: .75; }
  .tk-crew.cm.is-alone .tk-crew__all { margin-top: 0; }
  .cm.is-alone .cm-hero { padding-top: clamp(40px, 14vh, 150px); }
  .cm-list { margin-top: 10px; }
  .cm-search { max-width: 420px; }
  .cm-row { padding: 16px 0; }
  .cm-row .cm-more { opacity: 0; transition: opacity .15s ease; }
  .cm-row:hover .cm-more, .cm-row .cm-more:focus-visible { opacity: 1; }
  .cm-list, .cm-wait { max-width: 720px; }
}

/* New crew status: no sharp box — a rounded, softly glowing field with room around it (22 Oct) */
.screen--tkform .tk-statusbox { display: block; width: auto; margin: 12px 16px 0; min-height: 200px; padding: 18px 20px; border: 0; border-radius: 22px;
  background: var(--color-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, var(--color-line)), 0 0 26px -8px color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition: box-shadow .2s ease; }
.screen--tkform .tk-statusbox:focus { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 0 32px -4px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.screen--tkform .tk-statusnote { margin: 12px 20px; }
.tk-barbtn { border-radius: 18px; padding: 0 18px; }
@media (min-width: 1024px) { .screen--tkform .tk-statusbox { margin: 8px 0 0; } .screen--tkform .tk-statusnote { margin: 12px 4px; } }

/* Your status: its own soft block, time under the text on the left, Clear on the right (22 Oct) */
.cm-me__statusbox { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 12px; border-radius: 18px; background: var(--color-field); }
.cm-me__statusbox .cm-me__status { font-size: 17px; line-height: 25px; }
.cm-me__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-me__meta small { font-size: 12.5px; color: var(--color-ink-muted); }
.cm-clear { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-right: -6px; padding: 0 10px; border-radius: 15px; font-size: 13px; font-weight: 600; color: var(--color-ink-muted); }
.cm-clear svg { width: 12px; height: 12px; }
@media (hover: hover) { .cm-clear:hover { background: var(--color-hover); color: var(--color-ink); } }
.cm-me__status { word-break: break-word; }

/* Recently deleted (24 Oct): 30 days to restore */
.tk-trash { padding: 8px 16px 32px; }
.tk-trash__note { margin: 4px 0 14px; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.tk-card--trash { display: flex; align-items: center; gap: 12px; }
.tk-card--trash .tk-card__main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.tk-card__acts { flex: none; display: flex; align-items: center; gap: 4px; }
.tk-card__acts .dx-btn { height: 36px; gap: 6px; }
.tk-card__acts .dx-btn svg { width: 16px; height: 16px; }
@media (min-width: 1024px) { .tk-trash { max-width: 760px; padding: 8px 0 40px; } }

/* Day 1 → Day 30 (24 Oct): 0 tasks = the hero; 1–5 = a "new task" field (no lone + button, no search); 6+ = search, + and filter chips */
.tk-note { padding: 14px 16px 2px; font-size: 13.5px; line-height: 19px; }
.tk-newrow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 24px; background: var(--color-surface); color: var(--color-ink-muted); font: inherit; font-size: 15px; text-align: left; cursor: text;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, var(--color-line)), 0 0 22px -8px color-mix(in srgb, var(--color-accent) 45%, transparent); transition: box-shadow .2s ease; }
.tk-newrow svg { flex: none; width: 18px; height: 18px; color: var(--color-accent-text); }
.tk-newrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .tk-newrow:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 0 28px -6px color-mix(in srgb, var(--color-accent) 55%, transparent); } }
.tk-chips { margin: 0 0 10px; padding: 0 16px; }
.tk-card__gif { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.tk-card__gif svg { width: 14px; height: 14px; }
@media (min-width: 1024px) {
  .tk__side .tk-note { padding: 4px 0 0; }
  .tk__side .tk-chips { padding: 0; }
}
/* Day 1: ready tasks to start from */
.tk-starters__lab { margin: 18px 0 8px; font-size: 13px; color: var(--color-ink-muted); }
.tk-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }

/* Tasks: where finished things live, shown when nothing is open (24 Oct) */
.tk-places { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.tk-place { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--color-field); color: var(--color-ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.tk-place svg { width: 16px; height: 16px; color: var(--color-ink-2); }
.tk-place small { font-size: 12px; font-weight: 600; color: var(--color-ink-muted); }
@media (hover: hover) { .tk-place:hover { background: var(--color-hover); } }
/* Decisions: a dated record */
.tk-decs { padding: 8px 16px 32px; }
@media (min-width: 1024px) { .tk-decs { max-width: 760px; padding: 8px 0 40px; } }
.tk-decs .tk-search { margin-bottom: 8px; }
.tk-declist { display: flex; flex-direction: column; }
.tk-dec-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: var(--hairline) solid var(--color-line); color: inherit; text-decoration: none; }
.tk-dec-row:last-child { border-bottom: 0; }
.tk-dec-row__when { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-text); }
.tk-dec-row__text { font-size: 16px; line-height: 22px; font-weight: 700; }
.tk-dec-row__meta { font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
@media (hover: hover) { .tk-dec-row:hover .tk-dec-row__text { text-decoration: underline; } }