/* Worktask — extension layer over the utility-clean pack (motion-ui.css + themes.css).
   Tokens only, no forked palette: every colour resolves to a --m-* variable. */

:root { --wt-ok: #4ade80; --wt-bad: #ff7a8a; --wt-line: 1px solid var(--m-border); }

html { font-size: 15px; scroll-behavior: smooth; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body.m-app {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(124, 140, 255, .10), transparent 60%),
    radial-gradient(900px 460px at 92% 4%, rgba(99, 216, 255, .07), transparent 62%),
    var(--m-bg);
  color: var(--m-text); min-height: 100vh; display: flex; flex-direction: column;
  margin-bottom: 0; -webkit-font-smoothing: antialiased;
}

.wt-main { flex: 1 0 auto; padding-block: 1.75rem 3rem; }
a { color: var(--m-cyan); text-decoration: none; }
a:hover { color: var(--m-indigo); text-decoration: underline; text-underline-offset: 3px; }
:where(a, button, input, select, textarea, .m-card):focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -3rem; background: var(--m-indigo); color: #08090c; padding: .5rem .9rem; border-radius: 8px; font-weight: 600; z-index: 60; transition: top 160ms var(--m-ease); }
.skip-link:focus { top: .75rem; }

/* nav */
.wt-nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--m-bg) 78%, transparent); border-bottom: var(--wt-line); }
.wt-nav .navbar-brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--m-font-display); font-weight: 700; letter-spacing: -.02em; color: var(--m-text); }
.wt-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--m-grad); color: #06070a; box-shadow: 0 8px 20px -12px var(--m-indigo); }
.wt-mark svg { width: 17px; height: 17px; }
.wt-nav .nav-link { color: var(--m-muted); font-weight: 500; padding-inline: .7rem; border-radius: 8px; transition: color var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease); }
.wt-nav .nav-link:hover { color: var(--m-text); background: var(--m-surface); text-decoration: none; }
.wt-nav .nav-link.active { color: var(--m-text); box-shadow: inset 0 -2px 0 var(--m-indigo); }
.wt-lang { display: inline-flex; align-items: center; gap: .15rem; padding: .18rem; border: var(--wt-line); border-radius: 999px; background: var(--m-surface); }
.wt-lang a { font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; color: var(--m-muted); line-height: 1.5; }
.wt-lang a.on { background: var(--m-surface-2); color: var(--m-text); }
.wt-lang a:hover { text-decoration: none; color: var(--m-text); }
.wt-user { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--m-muted); max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--m-surface-2); color: var(--m-text); border: var(--wt-line); }
.navbar-toggler { border: var(--wt-line); }

/* page furniture */
.wt-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1.4rem; }
.wt-head h1 { font-family: var(--m-font-display); font-weight: 700; letter-spacing: -.025em; margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.wt-sub { color: var(--m-muted); margin: .35rem 0 0; max-width: 62ch; }
.m-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); font-weight: 600; }

.wt-kpis { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }
@media (min-width: 992px) { .wt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wt-kpis .m-card { padding: 1.1rem 1.2rem; }
.m-kpi__value { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.wt-kpi--bad .m-kpi__value { color: var(--wt-bad); }

.wt-panel { padding: 1.15rem 1.25rem; }
.wt-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.wt-panel__head h2 { font-size: 1rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.wt-panel__head span { color: var(--m-muted); font-size: .8rem; }
.wt-grid-2 { display: grid; gap: 1rem; }
@media (min-width: 992px) { .wt-grid-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }

/* task rows */
.wt-list { display: flex; flex-direction: column; }
.wt-row { display: grid; gap: .35rem .9rem; padding: .85rem .25rem; grid-template-columns: minmax(0, 1fr) auto; border-top: var(--wt-line); align-items: center; transition: background var(--m-base) var(--m-ease), padding-inline-start var(--m-base) var(--m-ease); }
.wt-row:first-child { border-top: 0; }
.wt-row:hover { background: color-mix(in srgb, var(--m-surface) 70%, transparent); padding-inline-start: .6rem; }
.wt-row__title { font-weight: 600; color: var(--m-text); display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.wt-row__title:hover { text-decoration: none; color: var(--m-cyan); }
.wt-row__meta { color: var(--m-muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.wt-row__meta b { color: var(--m-text); font-weight: 550; }
@media (min-width: 768px) {
  .wt-row { grid-template-columns: minmax(0, 1fr) 8.5rem 7.5rem 7rem auto; padding: .8rem .25rem; }
  .wt-row--head { color: var(--m-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; padding-block: .5rem; }
  .wt-row--head:hover { background: none; padding-inline-start: .25rem; }
}

.wt-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--m-text); white-space: nowrap; }
.wt-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--m-muted); flex: 0 0 auto; }
.wt-status[data-s="InProgress"] i { background: var(--m-cyan); }
.wt-status[data-s="Review"] i { background: var(--m-pink); }
.wt-status[data-s="Completed"] i { background: var(--wt-ok); }
.wt-status[data-s="Blocked"] i { background: var(--wt-bad); }

.wt-prio { font-size: .74rem; font-weight: 650; letter-spacing: .02em; padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.wt-prio[data-p="Low"] { color: var(--m-muted); }
.wt-prio[data-p="Medium"] { color: var(--m-cyan); }
.wt-prio[data-p="High"] { color: var(--m-amber); }
.wt-prio[data-p="Urgent"] { color: var(--wt-bad); }
.wt-money { font-variant-numeric: tabular-nums; }
.wt-due--late { color: var(--wt-bad); }

.wt-empty { text-align: center; padding: 3rem 1rem; color: var(--m-muted); }
.wt-empty svg { width: 74px; height: 74px; opacity: .45; margin-bottom: .9rem; }
.wt-empty h3 { color: var(--m-text); font-size: 1.02rem; margin: 0 0 .35rem; }
.wt-empty p { margin: 0 auto 1.1rem; max-width: 40ch; font-size: .9rem; }

/* form controls */
.form-label { font-size: .8rem; font-weight: 600; color: var(--m-muted); letter-spacing: .01em; margin-bottom: .3rem; }
.form-control, .form-select { background: var(--m-surface); border: var(--wt-line); color: var(--m-text); border-radius: 10px; padding: .55rem .7rem; font-size: .92rem; transition: border-color var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease); }
.form-control::placeholder { color: color-mix(in srgb, var(--m-muted) 80%, transparent); }
.form-control:focus, .form-select:focus { background: var(--m-surface-2); border-color: var(--m-indigo); color: var(--m-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-indigo) 22%, transparent); }
.form-select option { background: var(--m-bg-2); color: var(--m-text); }
.wt-hint { color: var(--m-muted); font-size: .78rem; }
.field-validation-error, .text-danger { color: var(--wt-bad) !important; font-size: .82rem; }
.form-check-input { background-color: var(--m-surface); border: var(--wt-line); }
.form-check-input:checked { background-color: var(--m-indigo); border-color: var(--m-indigo); }
.form-check-label { font-size: .88rem; color: var(--m-text); }
.wt-form { display: grid; gap: 1rem; }
.wt-form__grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .wt-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wt-span-2 { grid-column: span 2; } }
.wt-form__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding-top: .9rem; border-top: var(--wt-line); }

/* buttons */
.btn { border-radius: 10px; font-weight: 600; font-size: .88rem; padding: .5rem .95rem; transition: transform var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease); }
.btn-primary { background: var(--m-indigo); border-color: transparent; color: #07080b; box-shadow: 0 12px 26px -18px var(--m-indigo); }
.btn-primary:hover, .btn-primary:focus { background: color-mix(in srgb, var(--m-indigo) 84%, white); border-color: transparent; color: #07080b; }
.btn-outline-secondary, .btn-outline-light, .btn-outline-primary { background: var(--m-surface); border: var(--wt-line); color: var(--m-text); }
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-primary:hover { background: var(--m-surface-2); border-color: rgba(255, 255, 255, .22); color: var(--m-text); }
.btn-dark { background: var(--m-surface-2); border: var(--wt-line); color: var(--m-text); }
.btn-dark:hover { background: color-mix(in srgb, var(--m-indigo) 24%, var(--m-surface-2)); color: var(--m-text); }
.btn-sm { padding: .3rem .7rem; font-size: .82rem; }

/* detail rail / comments */
.wt-rail { display: grid; gap: .9rem; }
.wt-facts { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wt-fact__k { color: var(--m-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.wt-fact__v { font-weight: 600; font-size: .95rem; margin-top: .1rem; }
.wt-person { display: flex; align-items: center; gap: .65rem; }
.wt-person .wt-avatar { width: 34px; height: 34px; font-size: .8rem; }
.wt-person__n { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.wt-person__r { color: var(--m-muted); font-size: .76rem; }
.wt-thread { display: grid; }
.wt-comment { padding: .8rem 0; border-top: var(--wt-line); display: grid; gap: .3rem; }
.wt-comment:first-child { border-top: 0; padding-top: 0; }
.wt-comment__head { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--m-muted); }
.wt-comment__head b { color: var(--m-text); font-weight: 600; }
.wt-comment__body { margin: 0; font-size: .92rem; line-height: 1.55; }
.wt-prose { color: color-mix(in srgb, var(--m-text) 88%, transparent); line-height: 1.65; max-width: 68ch; }

/* hero (guest) */
.wt-hero { position: relative; overflow: hidden; padding: clamp(1.8rem, 1rem + 4vw, 3.6rem); }
.wt-hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .wt-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.wt-hero h1 { font-family: var(--m-font-display); font-weight: 700; letter-spacing: -.035em; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); margin: .6rem 0 .8rem; }
.wt-hero .lead { color: var(--m-muted); font-size: 1rem; max-width: 46ch; margin-bottom: 1.4rem; }
.wt-hero__art { display: grid; gap: .6rem; }
.wt-ghost-row { display: grid; grid-template-columns: 10px 1fr auto; gap: .7rem; align-items: center; padding: .7rem .85rem; border: var(--wt-line); border-radius: 12px; background: var(--m-surface); }
.wt-ghost-row span { height: 8px; border-radius: 4px; background: var(--m-surface-2); }
.wt-ghost-row span:first-child { background: var(--m-grad); height: 10px; border-radius: 50%; }
.wt-ghost-row b { font-size: .72rem; color: var(--m-muted); font-weight: 600; }
.wt-hero__pulse { position: absolute; inset-inline-end: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: var(--m-grad); filter: blur(70px); opacity: .18; pointer-events: none; }

/* login */
.wt-auth { display: grid; max-width: 940px; margin: clamp(.5rem, 2vw, 2rem) auto; overflow: hidden; }
@media (min-width: 992px) { .wt-auth { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.wt-auth__pane { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.wt-auth__aside { background: linear-gradient(150deg, color-mix(in srgb, var(--m-indigo) 20%, transparent), transparent 62%), var(--m-bg-2); border-inline-end: var(--wt-line); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.wt-auth__aside h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .6rem; }
.wt-auth__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.wt-auth__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--m-muted); }
.wt-auth__list svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .18rem; color: var(--m-cyan); }

/* toolbar / pager */
.wt-toolbar { display: grid; gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .wt-toolbar { grid-template-columns: minmax(0, 1fr) 11rem 9rem auto; align-items: center; } }
.wt-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--m-muted); font-size: .84rem; }
.wt-pager .btn { padding: .35rem .8rem; }
.wt-count { font-variant-numeric: tabular-nums; }

/* footer */
.wt-footer { border-top: var(--wt-line); color: var(--m-muted); font-size: .78rem; padding-block: 1.1rem 1.4rem; }
.wt-footer-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: space-between; }
.wt-footer i { color: var(--m-cyan); font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .wt-row:hover { padding-inline-start: .25rem; }
}