.nav-current {
  color: var(--accent) !important;
}
.tasks-page {
  position: relative;
  z-index: 1;
  padding: 10em 2em 6em;
}
.tasks-hero,
.task-overview,
.task-workbench {
  width: 100%;
  max-width: 70em;
  margin-left: auto;
  margin-right: auto;
}
.tasks-hero {
  padding: 3em 0 5em;
}
.tasks-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -0.035em;
  max-width: 10em;
}
.tasks-hero p {
  margin-top: 1.6em;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 34em;
}
.task-overview {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.2em;
}
.overview-main {
  grid-row: span 2;
  display: flex;
  align-items: center;
  gap: 2em;
  min-height: 20em;
}
.task-overview .bento-tile {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s,
    border-color 0.35s;
}
.task-overview .bento-tile::after {
  content: "";
  position: absolute;
  inset: -70%;
  background: linear-gradient(
    115deg,
    transparent 43%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 57%
  );
  transform: translateX(-45%) rotate(8deg);
  opacity: 0;
  transition:
    transform 0.7s ease,
    opacity 0.3s;
  pointer-events: none;
}
.task-overview .bento-tile:hover {
  transform: translateY(-7px);
  border-color: rgba(156, 122, 58, 0.55);
  box-shadow: 0 1.2em 2.8em rgba(22, 36, 28, 0.1);
}
.task-overview .bento-tile:hover::after {
  transform: translateX(45%) rotate(8deg);
  opacity: 1;
}
.progress-orbit {
  width: 11em;
  height: 11em;
  position: relative;
  flex: none;
}
.progress-orbit svg {
  width: 100%;
  transform: rotate(-90deg);
}
.progress-orbit circle {
  fill: none;
  stroke: var(--line);
  stroke-width: 4;
}
.progress-orbit .ring-live {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 0.7s;
}
.progress-orbit div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.progress-orbit strong {
  font: 2.3rem var(--font-serif);
}
.progress-orbit span,
.tile-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.overview-main h2 {
  font: 500 2rem var(--font-serif);
  margin: 0.5em 0;
}
.overview-main p,
.stat-tile p {
  color: var(--text-dim);
  line-height: 1.6;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 9.4em;
}
.stat-tile strong {
  font: 500 2.8rem var(--font-serif);
  margin: 0.18em 0;
}
.stat-tile small {
  font: 0.65rem sans-serif;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.task-workbench {
  margin-top: 6em;
}
.workbench-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2em;
}
.workbench-head h2 {
  font: 500 clamp(2.3rem, 5vw, 4rem) var(--font-serif);
  margin-top: 0.18em;
}
.task-composer {
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 1.4em;
  padding: 1.6em;
  margin-bottom: 2em;
  animation: composerIn 0.35s ease;
}
.composer-top {
  display: flex;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.composer-top button {
  border: 0;
  background: none;
  font-size: 1.5rem;
  color: var(--text-dim);
  cursor: pointer;
}
.task-composer > input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font: 500 1.6rem var(--font-serif);
  padding: 0.8em 0;
  outline: 0;
  color: var(--text);
}
.composer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-top: 1.2em;
}
.composer-grid label {
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.composer-grid .wide {
  grid-column: 1/-1;
}
.composer-grid input,
.composer-grid select {
  border: 1px solid var(--line);
  border-radius: 0.7em;
  background: var(--bg);
  color: var(--text);
  padding: 0.9em;
  font: inherit;
}
.composer-submit {
  margin-top: 1.2em;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  padding: 0.9em 1.5em;
  cursor: pointer;
}
.composer-submit span {
  margin-left: 1em;
}
.task-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1em;
}
.task-filters button {
  border: 0;
  background: none;
  color: var(--text-dim);
  padding: 0.6em 1em;
  cursor: pointer;
}
.task-filters button.active {
  color: var(--text);
  background: var(--bg-elev);
  border-radius: 999px;
}
.task-filters > span {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.task-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1em;
  padding: 1.5em 0.8em;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  border-radius: 1em;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.task-card:hover {
  transform: translateX(10px);
  background: rgba(228, 232, 221, 0.72);
  border-color: rgba(156, 122, 58, 0.3);
  box-shadow: -0.45em 0.65em 1.8em rgba(22, 36, 28, 0.06);
}
.task-card:hover .task-name {
  color: var(--accent);
  transform: translateX(0.18em);
}
.task-name {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.task-check {
  width: 1.8em;
  height: 1.8em;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: transparent;
}
.task-card.done .task-check {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.task-card.done .task-name {
  text-decoration: line-through;
  color: var(--text-dim);
}
.task-name {
  font: 500 1.25rem var(--font-serif);
}
.task-meta {
  display: flex;
  gap: 1em;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 0.45em;
}
.task-meta b {
  color: var(--accent);
  font-weight: 500;
}
.task-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.7em;
}
.task-progress {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 1em;
}
.task-progress input {
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--line);
}
.task-progress input::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
}
.task-progress span {
  font-size: 0.72rem;
  width: 3em;
  text-align: right;
}
.task-delete {
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
}
.task-empty {
  text-align: center;
  padding: 5em 1em;
  color: var(--text-dim);
}
.task-empty span {
  font: 3rem var(--font-serif);
  color: var(--accent);
}
.task-empty h3 {
  font: 500 1.5rem var(--font-serif);
  color: var(--text);
  margin: 0.5em;
}
.reward-toast {
  position: fixed;
  right: 2em;
  bottom: 2em;
  z-index: 200;
  background: var(--text);
  color: var(--bg);
  display: flex;
  gap: 1em;
  align-items: center;
  padding: 1.1em 1.4em;
  border-radius: 1em;
  transform: translateY(8em);
  opacity: 0;
  transition: 0.4s;
}
.reward-toast.show {
  transform: none;
  opacity: 1;
}
.reward-toast b {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
}
.reward-toast p {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.3em;
}
#rewardCanvas {
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
}
@keyframes composerIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@media (max-width: 800px) {
  .tasks-page {
    padding: 8em 1em 4em;
  }
  .task-overview {
    grid-template-columns: 1fr 1fr;
  }
  .overview-main {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .workbench-head {
    align-items: flex-start;
    gap: 1em;
  }
}
@media (max-width: 520px) {
  .tasks-hero {
    padding-bottom: 3em;
  }
  .task-overview {
    grid-template-columns: 1fr;
  }
  .overview-main {
    flex-direction: column;
    align-items: flex-start;
  }
  .composer-grid {
    grid-template-columns: 1fr;
  }
  .composer-grid .wide {
    grid-column: auto;
  }
  .workbench-head {
    display: block;
  }
  .workbench-head .btn-primary {
    margin-top: 1.2em;
  }
  .reward-toast {
    left: 1em;
    right: 1em;
    bottom: 1em;
  }
}

/* 2026 task studio — tactile action ledger */
.tasks-page { max-width:86rem; padding:clamp(8rem,13vw,11rem) clamp(1.1rem,4vw,4rem) 7rem; }
.tasks-hero { position:relative; min-height:34rem; padding:clamp(3rem,7vw,6rem); border:1px solid rgba(24,49,38,.1); border-radius:3rem; overflow:hidden; background:radial-gradient(circle at 82% 25%,rgba(164,124,55,.24),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.58),rgba(232,234,223,.75)); box-shadow:inset 0 1px rgba(255,255,255,.7),0 2rem 6rem rgba(24,49,38,.08); }
.tasks-hero::after { content:""; position:absolute; right:-8rem; bottom:-12rem; width:34rem; aspect-ratio:1; border:1px solid rgba(164,124,55,.25); border-radius:50%; box-shadow:0 0 0 3rem rgba(164,124,55,.035),0 0 0 8rem rgba(164,124,55,.025); }
.tasks-hero h1 { max-width:10ch; font-size:clamp(3.2rem,7.8vw,7.2rem); line-height:.95; letter-spacing:-.06em; }
.tasks-hero p { max-width:33rem; font-size:1.08rem; }
.task-overview { grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.overview-main { grid-column:span 7; grid-row:span 2; min-height:20rem; border-radius:2rem; }
.stat-tile { grid-column:span 5; border-radius:1.5rem; min-height:9.35rem; }
.task-overview .bento-tile { background:rgba(255,255,255,.46); box-shadow:inset 0 1px rgba(255,255,255,.72),0 1.2rem 3.4rem rgba(24,49,38,.06); }
.progress-orbit { filter:drop-shadow(0 1rem 2rem rgba(164,124,55,.16)); }
.task-workbench { margin-top:5rem; padding:clamp(1.2rem,3vw,2.5rem); border:1px solid rgba(24,49,38,.1); border-radius:2.5rem; background:rgba(255,255,255,.32); box-shadow:inset 0 1px rgba(255,255,255,.7),0 2rem 6rem rgba(24,49,38,.06); }
.workbench-head { padding:.6rem .5rem 1.8rem; }
.workbench-head h2 { font-size:clamp(2.2rem,5vw,4.5rem); line-height:1; letter-spacing:-.055em; }
.task-composer { border:1px solid rgba(164,124,55,.22); border-radius:2rem; padding:clamp(1.2rem,3vw,2.2rem); background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(243,241,232,.8)); box-shadow:0 2rem 5rem rgba(24,49,38,.12); transform-origin:top center; animation:composerIn .55s cubic-bezier(.4,0,.05,1) both; }
@keyframes composerIn { from { opacity:0; transform:translateY(-1rem) scale(.98); clip-path:inset(0 0 100% 0 round 2rem); } to { opacity:1; transform:none; clip-path:inset(0 round 2rem); } }
.task-composer>input,.composer-grid input,.composer-grid select { min-height:3.4rem; border-radius:1rem; border:1px solid rgba(24,49,38,.12); background:rgba(243,241,232,.72); transition:border-color .25s ease,box-shadow .25s ease,background .25s ease; }
.task-composer input:focus,.task-composer select:focus { outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(164,124,55,.1); }
.composer-submit { min-height:3.6rem; border-radius:999px; }
.task-filters { position:sticky; top:6.4rem; z-index:8; padding:.8rem; border-radius:999px; background:rgba(243,241,232,.78); backdrop-filter:blur(16px); }
.task-filters button { border-radius:999px; padding:.65rem 1rem; }
.task-list { gap:.85rem; }
.task-card { --task-progress:0%; position:relative; grid-template-columns:auto minmax(0,1fr) auto; padding:1.2rem 1.25rem; border-radius:1.4rem; background:linear-gradient(90deg,rgba(164,124,55,.09) var(--task-progress),transparent var(--task-progress)),rgba(255,255,255,.48); box-shadow:inset 0 1px rgba(255,255,255,.7),0 .8rem 2rem rgba(24,49,38,.04); transition:transform .45s cubic-bezier(.4,0,.05,1),box-shadow .45s cubic-bezier(.4,0,.05,1),opacity .3s ease; }
.task-card:hover { transform:translateY(-5px); box-shadow:0 1.4rem 3.4rem rgba(24,49,38,.1); }
.task-card.done { opacity:.7; }
.task-check { width:2.8rem; height:2.8rem; border-radius:50%; transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s ease; }
.task-card.done .task-check { transform:scale(1.08); }
.task-name { font-size:1.12rem; font-weight:650; }
.task-progress { margin-top:1.15rem; }
.task-progress input { --fill:var(--task-progress); height:7px; border-radius:999px; background:linear-gradient(90deg,var(--gold) 0 var(--fill),rgba(24,49,38,.1) var(--fill)); }
.task-progress input::-webkit-slider-thumb { width:20px; height:20px; border:4px solid var(--paper); box-shadow:0 2px 10px rgba(24,49,38,.22); }
.progress-milestones { display:grid; grid-template-columns:repeat(5,1fr); margin:.45rem 3.4rem 0 0; }
.progress-milestones i { width:4px; height:4px; border-radius:50%; background:rgba(24,49,38,.22); justify-self:center; }
.progress-milestones i.reached { background:var(--gold); box-shadow:0 0 0 4px rgba(164,124,55,.1); }
.reward-toast { border-radius:1.4rem; background:rgba(243,241,232,.92); backdrop-filter:blur(20px); box-shadow:0 1.5rem 5rem rgba(24,49,38,.18); }
@media (max-width:800px) { .tasks-hero{min-height:28rem;border-radius:2rem}.task-overview{grid-template-columns:1fr 1fr}.overview-main{grid-column:1/-1}.stat-tile{grid-column:span 1}.task-filters{top:5.7rem;border-radius:1.2rem} }
@media (max-width:560px) { .tasks-page{padding-left:.75rem;padding-right:.75rem}.tasks-hero{padding:2rem 1.3rem}.tasks-hero h1{font-size:clamp(3rem,15vw,4.5rem)}.task-overview{grid-template-columns:1fr}.stat-tile{grid-column:1}.task-workbench{padding:.7rem;border-radius:1.6rem}.workbench-head{align-items:flex-start;gap:1rem}.task-card{padding:1rem .8rem}.progress-milestones{margin-right:2.5rem} }