/*
 * TaskRune — Obsidian Roman Clay
 * A restrained material layer inspired by Knight AI+AV's oxblood/emerald system.
 * Product behavior remains in index.html; this file owns presentation only.
 */

:root {
  --tr-obsidian: #080807;
  --tr-charcoal: #11110f;
  --tr-oxblood: #3a0710;
  --tr-wine: #26050b;
  --tr-garnet: #680f1c;
  --tr-emerald: #06291f;
  --tr-malachite: #126044;
  --tr-gold: #c9a55a;
  --tr-gold-bright: #f1d58b;
  --tr-parchment: #f3ead5;
  --tr-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --tr-rule: color-mix(in srgb, var(--tr-gold), transparent 68%);
  --tr-rule-strong: color-mix(in srgb, var(--tr-gold-bright), transparent 46%);
  --radius: 3px;
}

body {
  isolation: isolate;
  background: var(--tr-obsidian);
}

body::before {
  z-index: -2;
  opacity: 1;
  mask-image: none;
  mix-blend-mode: normal;
  background:
    radial-gradient(ellipse 82% 70% at 8% 4%, rgba(104, 15, 28, 0.52), transparent 64%),
    radial-gradient(ellipse 86% 78% at 95% 92%, rgba(6, 41, 31, 0.72), transparent 66%),
    radial-gradient(circle at 52% 35%, rgba(201, 165, 90, 0.09), transparent 34%),
    linear-gradient(128deg, rgba(255,255,255,0.025), transparent 29%, rgba(0,0,0,0.4) 74%),
    var(--tr-obsidian);
  transition: background 560ms ease, filter 560ms ease;
}

body::after {
  content: "";
  position: fixed;
  z-index: 20;
  inset: 10px;
  pointer-events: none;
  border: 1px solid var(--tr-rule);
  background:
    linear-gradient(var(--tr-gold), var(--tr-gold)) left top / 34px 1px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) left top / 1px 34px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) right top / 34px 1px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) right top / 1px 34px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) left bottom / 34px 1px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) left bottom / 1px 34px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) right bottom / 34px 1px no-repeat,
    linear-gradient(var(--tr-gold), var(--tr-gold)) right bottom / 1px 34px no-repeat;
  opacity: 0.62;
}

body[data-agent-mode="listening"]::before,
body[data-agent-mode="arming"]::before,
body[data-agent-mode="tail"]::before {
  background:
    radial-gradient(ellipse 96% 86% at 28% 20%, rgba(104, 15, 28, 0.82), transparent 62%),
    radial-gradient(ellipse 74% 72% at 93% 90%, rgba(38, 5, 11, 0.86), transparent 68%),
    radial-gradient(circle at 50% 38%, rgba(241, 213, 139, 0.08), transparent 32%),
    var(--tr-obsidian);
}

body[data-agent-mode="thinking"]::before {
  background:
    radial-gradient(ellipse 88% 78% at 88% 16%, rgba(18, 96, 68, 0.54), transparent 66%),
    radial-gradient(ellipse 72% 70% at 6% 90%, rgba(58, 7, 16, 0.48), transparent 68%),
    radial-gradient(circle at 52% 32%, rgba(201, 165, 90, 0.13), transparent 36%),
    var(--tr-obsidian);
}

body[data-agent-mode="speaking"]::before,
body[data-agent-mode="done"]::before {
  background:
    radial-gradient(ellipse 84% 76% at 84% 18%, rgba(18, 96, 68, 0.6), transparent 66%),
    radial-gradient(ellipse 78% 72% at 8% 86%, rgba(104, 15, 28, 0.48), transparent 68%),
    radial-gradient(circle at 50% 34%, rgba(241, 213, 139, 0.16), transparent 38%),
    var(--tr-obsidian);
}

.workspace {
  position: relative;
  z-index: 1;
}

.workspace::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(96deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 21px),
    repeating-linear-gradient(176deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 36% 44%, rgba(255,255,255,0.38) 0 0.55px, transparent 0.9px);
  background-size: auto, auto, 13px 17px;
  mix-blend-mode: soft-light;
}

.phone,
body[data-appearance="dark"] .phone {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 31%, rgba(0,0,0,0.2)),
    transparent;
}

.app {
  max-width: 1680px;
  padding-inline: clamp(18px, 3.3vw, 64px);
}

.topline {
  min-height: 62px;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--tr-rule);
}

.brand-lockup {
  gap: 13px;
}

.brand strong {
  color: var(--tr-parchment);
  font-family: var(--tr-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.035em;
}

.brand span {
  color: color-mix(in srgb, var(--tr-gold-bright), transparent 28%);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.taskrune-mark {
  border-radius: 2px;
  border-color: var(--tr-rule-strong);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 0 0 1px rgba(201,165,90,0.08),
    0 8px 24px rgba(0,0,0,0.34);
}

.icon-button,
.pill-button,
.primary-button,
.segment,
.theme-choice,
.swatch {
  border-radius: 2px;
  box-shadow: none;
}

.icon-button,
.pill-button {
  border-color: var(--tr-rule);
  background: rgba(8, 8, 7, 0.22);
}

.icon-button:hover,
.pill-button:hover,
.primary-button:hover {
  border-color: var(--tr-rule-strong);
  background: color-mix(in srgb, var(--tr-gold), transparent 92%);
}

.agent-bar {
  height: 118px;
  margin: 16px 0 12px;
  border: 1px solid var(--tr-rule-strong);
  border-radius: 3px;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.17),
    inset 0 -34px 62px rgba(0,0,0,0.62),
    0 1px 0 rgba(0,0,0,0.8),
    0 20px 52px rgba(0,0,0,0.28),
    0 0 calc(34px * var(--glow)) color-mix(in srgb, var(--agent-a), transparent 84%);
}

.agent-bar::after {
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.54),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.agent-state strong {
  font-family: var(--tr-display);
  font-weight: 600;
  letter-spacing: 0.025em;
}

.agent-state span,
.stage-head,
.stage-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stage-head {
  border-bottom-color: var(--tr-rule);
}

.stage-head strong,
.list-title h2,
.sheet h3,
.onboarding-card h2 {
  font-family: var(--tr-display);
  font-weight: 600;
}

.stage-head strong {
  color: color-mix(in srgb, var(--tr-gold-bright), var(--ink) 35%);
}

.list-card {
  border-top-color: var(--tr-rule);
  background: transparent;
}

.list-overview {
  border-right-color: var(--tr-rule);
}

.list-title h2 {
  max-width: 12ch;
  color: var(--tr-parchment);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 0.94;
  letter-spacing: -0.025em;
}

.list-title p {
  max-width: 34ch;
  color: color-mix(in srgb, var(--tr-parchment), transparent 34%);
  line-height: 1.5;
}

.chip {
  color: color-mix(in srgb, var(--tr-gold-bright), transparent 32%);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chip + .chip::before {
  color: var(--tr-gold);
}

.momentum-strip {
  min-height: 58px;
  border: 0;
  border-block: 1px solid var(--tr-rule);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(6,41,31,0.26), transparent 64%);
  box-shadow: none;
}

.momentum-score {
  min-width: 52px;
  min-height: 28px;
  border: 1px solid var(--tr-rule);
  border-radius: 2px;
  color: var(--tr-gold-bright);
  background: rgba(8,8,7,0.38);
  box-shadow: none;
  font-family: var(--tr-display);
  font-size: 13px;
}

.items {
  gap: 0;
  border-top: 1px solid var(--tr-rule);
}

.task {
  min-height: calc(72px * var(--density));
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.task:hover {
  border-bottom-color: var(--tr-rule-strong);
  background:
    linear-gradient(90deg, rgba(18,96,68,0.16), transparent 56%),
    linear-gradient(270deg, rgba(104,15,28,0.13), transparent 50%);
}

.task.is-dragging,
.task.drag-over {
  border-color: var(--tr-gold);
  background: color-mix(in srgb, var(--tr-gold), transparent 92%);
  box-shadow: inset 3px 0 var(--tr-gold);
}

body[data-card-shape="soft"] .task,
body[data-card-shape="sharp"] .task,
body[data-card-shape="pill"] .task {
  margin-block: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.task-title {
  justify-items: start;
}

.task-title strong {
  color: color-mix(in srgb, var(--tr-parchment), white 4%);
  font-family: var(--tr-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.task-title span {
  color: var(--muted);
}

.task-number {
  min-width: 32px;
}

.number-label {
  color: var(--tr-gold);
  font-family: var(--tr-display);
  font-size: 13px;
  font-weight: 600;
}

.check {
  width: 23px;
  border-radius: 1px;
  border-color: var(--tr-rule-strong);
  background: rgba(8,8,7,0.3);
}

.task.done .check {
  color: var(--tr-obsidian);
  border-color: var(--tr-gold-bright);
  background: var(--tr-gold-bright);
}

.priority {
  width: 2px;
  border-radius: 0;
}

.task-link {
  border: 0;
  border-bottom: 1px solid var(--tr-rule);
  border-radius: 0;
  background: transparent;
}

.composer {
  margin-top: 0;
  padding-top: 12px;
  border-top-color: var(--tr-rule);
}

.composer textarea {
  min-height: 54px;
  border: 0;
  border-bottom: 1px solid var(--tr-rule-strong);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(6,41,31,0.22), transparent 72%);
  padding-inline: 12px;
}

.composer textarea:focus {
  border-bottom-color: var(--tr-gold-bright);
  background:
    linear-gradient(90deg, rgba(18,96,68,0.2), transparent 74%);
}

.primary-button {
  min-height: 44px;
  border-color: var(--tr-rule-strong);
  color: var(--tr-obsidian);
  background:
    linear-gradient(180deg, var(--tr-gold-bright), var(--tr-gold));
}

.primary-button:hover {
  color: var(--tr-obsidian);
  background:
    linear-gradient(180deg, #f8e7b2, var(--tr-gold-bright));
}

.sheet {
  background:
    radial-gradient(ellipse at 12% 2%, rgba(58,7,16,0.42), transparent 52%),
    radial-gradient(ellipse at 90% 98%, rgba(6,41,31,0.46), transparent 58%),
    rgba(0,0,0,0.68);
  backdrop-filter: blur(18px);
}

.sheet-panel,
body[data-appearance="dark"] .sheet-panel,
.onboarding-card,
body[data-appearance="dark"] .onboarding-card,
.toast,
body[data-appearance="dark"] .toast {
  border: 1px solid var(--tr-rule-strong);
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(58,7,16,0.18), transparent 34%),
    linear-gradient(325deg, rgba(6,41,31,0.2), transparent 38%),
    rgba(10,10,9,0.96);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.46),
    0 28px 90px rgba(0,0,0,0.54);
}

.sheet-panel::before,
.onboarding-card::before {
  border-color: var(--tr-rule);
}

.sheet h3,
.onboarding-card h2 {
  color: var(--tr-parchment);
  letter-spacing: -0.015em;
}

.control label {
  color: color-mix(in srgb, var(--tr-gold-bright), transparent 30%);
}

.segment.active {
  border-bottom-color: var(--tr-gold-bright);
  color: var(--tr-gold-bright);
  background: color-mix(in srgb, var(--tr-gold), transparent 93%);
}

.onboarding-prism {
  border-radius: 2px;
  border-color: var(--tr-rule-strong);
}

.reminder-strip,
.action-record,
.auth-card {
  border-color: var(--tr-rule);
  border-radius: 0;
}

body[data-appearance="light"] {
  --tr-obsidian: #f4ede0;
  --tr-charcoal: #e6ddce;
  --tr-parchment: #281d18;
  --tr-rule: rgba(104, 15, 28, 0.24);
  --tr-rule-strong: rgba(104, 15, 28, 0.42);
}

body[data-appearance="light"]::before {
  opacity: 1;
  mix-blend-mode: normal;
  background:
    radial-gradient(ellipse 88% 76% at 0% 0%, rgba(104,15,28,0.12), transparent 64%),
    radial-gradient(ellipse 84% 76% at 100% 100%, rgba(18,96,68,0.13), transparent 66%),
    radial-gradient(circle at 50% 32%, rgba(201,165,90,0.2), transparent 35%),
    linear-gradient(145deg, #e8dfd0, #fffaf0 52%, #eee5d7);
}

body[data-appearance="light"]::after {
  opacity: 0.7;
}

body[data-appearance="light"] .phone {
  background: rgba(255,250,240,0.3);
}

body[data-appearance="light"] .brand strong,
body[data-appearance="light"] .list-title h2,
body[data-appearance="light"] .task-title strong,
body[data-appearance="light"] .sheet h3,
body[data-appearance="light"] .onboarding-card h2 {
  color: #281d18;
}

body[data-appearance="light"] .brand span,
body[data-appearance="light"] .chip {
  color: #704f2d;
}

body[data-appearance="light"] .task:hover {
  background:
    linear-gradient(90deg, rgba(18,96,68,0.08), transparent 56%),
    linear-gradient(270deg, rgba(104,15,28,0.07), transparent 50%);
}

body[data-appearance="light"] .composer textarea {
  background: rgba(255,255,255,0.24);
}

body[data-appearance="light"] .sheet-panel,
body[data-appearance="light"] .onboarding-card,
body[data-appearance="light"] .toast {
  color: #281d18;
  background:
    linear-gradient(145deg, rgba(104,15,28,0.045), transparent 34%),
    linear-gradient(325deg, rgba(18,96,68,0.05), transparent 38%),
    rgba(255,250,240,0.97);
  box-shadow: 0 28px 90px rgba(74,48,32,0.2);
}

@media (prefers-color-scheme: light) {
  body[data-appearance="system"] {
    --tr-obsidian: #f4ede0;
    --tr-charcoal: #e6ddce;
    --tr-parchment: #281d18;
    --tr-rule: rgba(104, 15, 28, 0.24);
    --tr-rule-strong: rgba(104, 15, 28, 0.42);
  }

  body[data-appearance="system"]::before {
    opacity: 1;
    mix-blend-mode: normal;
    background:
      radial-gradient(ellipse 88% 76% at 0% 0%, rgba(104,15,28,0.12), transparent 64%),
      radial-gradient(ellipse 84% 76% at 100% 100%, rgba(18,96,68,0.13), transparent 66%),
      radial-gradient(circle at 50% 32%, rgba(201,165,90,0.2), transparent 35%),
      linear-gradient(145deg, #e8dfd0, #fffaf0 52%, #eee5d7);
  }

  body[data-appearance="system"] .brand strong,
  body[data-appearance="system"] .list-title h2,
  body[data-appearance="system"] .task-title strong,
  body[data-appearance="system"] .sheet h3,
  body[data-appearance="system"] .onboarding-card h2 {
    color: #281d18;
  }
}

@media (max-width: 1179px) {
  .list-overview {
    border-right: 0;
    border-bottom-color: var(--tr-rule);
  }

  .list-title h2 {
    max-width: none;
    font-size: clamp(28px, 6vw, 42px);
  }
}

@media (max-width: 700px) {
  body::after {
    inset: 5px;
    opacity: 0.46;
  }

  .app {
    padding-inline: 15px;
  }

  .topline {
    min-height: 52px;
    padding-bottom: 9px;
  }

  .agent-bar {
    height: 112px;
    margin-top: 12px;
  }

  .list-card {
    padding-top: 12px;
  }

  .task {
    grid-template-columns: 42px minmax(0, 1fr) 6px;
    min-height: calc(68px * var(--density));
    padding-inline: 8px;
  }

  .task-title strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    transition: none;
  }
}