:root {
  --plan-code: #9bb9d0;
  --plan-design: #c4b18f;
  --plan-art: #92aa8d;
  --plan-animation: #aaa0bf;
  --plan-vfx: #c5a071;
  --plan-audio: #b68d96;
  --plan-ui: #8eb8bb;
  --plan-qa: #bd8d88;
  --plan-production: #9ca4aa;
  --plan-column: 20rem;
  --plan-gap: 0.9rem;
}

body[data-page="planning"] {
  background:
    radial-gradient(circle at 78% 4%, rgba(178, 191, 199, 0.1), transparent 24rem),
    radial-gradient(circle at 8% 18%, rgba(94, 111, 116, 0.12), transparent 30rem),
    linear-gradient(180deg, #0d0f10 0%, #08090a 72%, #070808 100%);
}

body.has-card-drawer {
  overflow: hidden;
}

.planning-main {
  min-height: 100vh;
  padding-top: 5.6rem;
}

.planning-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  padding: clamp(3.4rem, 7vw, 6.5rem) clamp(1rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.planning-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(48rem, 68vw);
  height: min(48rem, 68vw);
  top: -65%;
  right: -7%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(255, 255, 255, 0.009),
    0 0 0 11rem rgba(255, 255, 255, 0.006);
}

.planning-hero__copy {
  min-width: 0;
}

.planning-hero__eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.planning-hero__eyebrow-row .eyebrow {
  margin: 0;
}

.planning-hero h1 {
  max-width: 15ch;
  margin: 1rem 0 0;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2.55rem, 5.5vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.planning-hero__summary {
  max-width: 49rem;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.72;
}

.data-source-badge,
.scope-pill,
.plan-tag,
.card-state,
.card-scope,
.detail-pill,
.relation-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  white-space: nowrap;
}

.data-source-badge {
  gap: 0.4rem;
  min-height: 1.65rem;
  padding: 0.3rem 0.65rem;
  color: #b8c0c5;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.data-source-badge::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.55rem currentColor;
}

.data-source-badge[data-source="database"] {
  color: #b9d0c0;
  border-color: rgba(155, 199, 168, 0.18);
  background: rgba(113, 166, 130, 0.07);
}

.data-source-badge[data-source="seed"] {
  color: #d0bd99;
  border-color: rgba(205, 178, 126, 0.19);
  background: rgba(175, 137, 79, 0.07);
}

.scope-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.scope-pill {
  gap: 0.48rem;
  min-height: 2rem;
  padding: 0.42rem 0.72rem;
  color: #c1c8cc;
  background: rgba(255, 255, 255, 0.026);
  font-size: 0.74rem;
  font-weight: 700;
}

.scope-pill::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: #e6ebee;
  box-shadow: 0 0 0.5rem rgba(230, 235, 238, 0.26);
}

.scope-pill--count {
  color: #929ba1;
  border-style: dashed;
}

.scope-pill--count::before {
  background: #8d969c;
  box-shadow: none;
}

.planning-hero__status {
  display: grid;
  grid-template-columns: auto minmax(11rem, 15rem);
  gap: 1rem;
  align-items: center;
  min-width: 21rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 55%),
    rgba(12, 14, 15, 0.76);
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.24);
}

.planning-hero__status > div:last-child {
  display: grid;
  gap: 0.22rem;
}

.planning-hero__status strong {
  font-size: 0.96rem;
  line-height: 1.35;
}

.planning-hero__status span {
  color: var(--muted);
  font-size: 0.8rem;
}

.release-orbit__label {
  margin: 0;
  color: #b8c0c5;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.release-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.85rem;
  height: 3.85rem;
}

.release-orbit > span {
  position: absolute;
  inset: 0.2rem;
  border: 1px solid rgba(232, 238, 241, 0.14);
  border-radius: 50%;
}

.release-orbit > span:nth-child(2) {
  inset: 0.65rem;
  border-style: dashed;
  animation: plan-orbit 12s linear infinite;
}

.release-orbit img {
  width: 2.25rem;
  height: 2.25rem;
  filter: drop-shadow(0 0 0.65rem rgba(237, 243, 246, 0.2));
}

@keyframes plan-orbit {
  to {
    transform: rotate(360deg);
  }
}

.planning-app {
  padding: clamp(1.1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem) 3rem;
}

.planning-loading,
.planning-error {
  min-height: 24rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.planning-loading {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--muted);
}

.planning-loading[hidden] {
  display: none;
}

.planning-loading > span {
  font-size: 0.86rem;
}

.planning-error {
  display: grid;
  grid-template-columns: auto minmax(0, 28rem) auto;
  gap: 1rem;
}

.planning-error[hidden] {
  display: none;
}

.planning-error img {
  width: 3rem;
  filter: grayscale(1) opacity(0.7);
}

.planning-error strong {
  display: block;
}

.planning-error p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.arcane-spinner {
  --spinner-size: 2.6rem;
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
  flex: 0 0 var(--spinner-size);
  border-radius: 50%;
  background: conic-gradient(
    from 20deg,
    transparent 0deg,
    rgba(190, 200, 206, 0.06) 92deg,
    rgba(229, 235, 238, 0.48) 248deg,
    #ffffff 328deg,
    transparent 360deg
  );
  filter: drop-shadow(0 0 0.5rem rgba(241, 246, 248, 0.3));
  animation: arcane-spin 760ms linear infinite;
}

.arcane-spinner::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: #0d0f10;
  box-shadow:
    0 0 0.55rem rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

.arcane-spinner::after {
  content: "";
  position: absolute;
  top: -0.03rem;
  left: 50%;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0.7rem rgba(255, 255, 255, 0.8);
  transform: translateX(-50%);
}

.arcane-spinner span {
  position: absolute;
  z-index: 1;
  inset: 36%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.arcane-spinner--small {
  --spinner-size: 1.1rem;
}

.arcane-spinner--small::before {
  inset: 1.5px;
}

.arcane-spinner--small::after {
  width: 0.16rem;
  height: 0.16rem;
}

@keyframes arcane-spin {
  to {
    transform: rotate(360deg);
  }
}

.planning-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.planning-content > * {
  min-width: 0;
}

.planning-content[hidden] {
  display: none;
}

.plan-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

.plan-kpi {
  position: relative;
  min-width: 0;
  padding: 0.92rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(15, 18, 19, 0.76);
}

.plan-kpi::after {
  content: "";
  position: absolute;
  right: -1.3rem;
  bottom: -1.7rem;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
}

.plan-kpi span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-kpi strong {
  display: block;
  margin-top: 0.28rem;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1;
}

.plan-kpi small {
  display: block;
  margin-top: 0.38rem;
  overflow: hidden;
  color: #899198;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-toolbar {
  position: sticky;
  top: 5.55rem;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(11, 13, 14, 0.88);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(24px) saturate(1.06);
}

.planning-toolbar > * {
  min-width: 0;
}

.planning-toolbar__primary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.planning-toolbar__primary > div:first-child {
  min-width: 0;
}

.planning-toolbar__label {
  margin: 0 0 0.5rem;
  color: #b1b9be;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discipline-filters {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  overflow-x: auto;
  padding: 0.08rem 0 0.2rem;
  scrollbar-width: thin;
}

.discipline-chip,
.compact-action,
.clear-filters,
.roadmap-scroll-controls button,
.card-drawer__chrome button,
.planning-dialog__close,
.card-action,
.relation-card,
.tag-button,
.icon-button {
  border: 0;
  color: inherit;
  cursor: pointer;
}

.discipline-chip {
  --chip-accent: #c3cbd0;
  position: relative;
  flex: none;
  min-height: 2.25rem;
  padding: 0.48rem 0.75rem 0.48rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #969fa5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.discipline-chip::before {
  content: "";
  position: absolute;
  left: 0.72rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--chip-accent);
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--chip-accent) 45%, transparent);
}

.discipline-chip:hover,
.discipline-chip[aria-pressed="true"] {
  color: #eef2f4;
  border-color: color-mix(in srgb, var(--chip-accent) 34%, transparent);
  background: color-mix(in srgb, var(--chip-accent) 10%, rgba(255, 255, 255, 0.02));
  transform: translateY(-1px);
}

.discipline-chip[data-discipline="Code"] {
  --chip-accent: var(--plan-code);
}

.discipline-chip[data-discipline="Game Design"] {
  --chip-accent: var(--plan-design);
}

.discipline-chip[data-discipline="3D Art"] {
  --chip-accent: var(--plan-art);
}

.discipline-chip[data-discipline="Animation"] {
  --chip-accent: var(--plan-animation);
}

.discipline-chip[data-discipline="VFX"] {
  --chip-accent: var(--plan-vfx);
}

.discipline-chip[data-discipline="Audio"] {
  --chip-accent: var(--plan-audio);
}

.discipline-chip[data-discipline="UI/UX"] {
  --chip-accent: var(--plan-ui);
}

.discipline-chip[data-discipline="QA"] {
  --chip-accent: var(--plan-qa);
}

.discipline-chip[data-discipline="Production"] {
  --chip-accent: var(--plan-production);
}

.planning-toolbar__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
}

.compact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: #aab2b7;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.compact-action:hover,
.compact-action[aria-pressed="true"] {
  color: #eef2f4;
  border-color: rgba(225, 232, 236, 0.2);
  background: rgba(225, 232, 236, 0.075);
}

.compact-action__icon {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.dependency-toggle-icon::before,
.dependency-toggle-icon::after {
  content: "";
  position: absolute;
  top: 0.42rem;
  width: 0.34rem;
  height: 0.34rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.dependency-toggle-icon::before {
  left: 0;
}

.dependency-toggle-icon::after {
  right: 0;
}

.dependency-toggle-icon {
  background: linear-gradient(currentColor, currentColor) center / 0.42rem 1px no-repeat;
}

.lock-icon::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: 0.05rem;
  height: 0.58rem;
  border: 1.5px solid currentColor;
  border-radius: 0.18rem;
}

.lock-icon::after {
  content: "";
  position: absolute;
  top: 0.03rem;
  left: 0.34rem;
  width: 0.34rem;
  height: 0.46rem;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
}

.planning-toolbar__secondary {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) repeat(5, minmax(7.5rem, 0.34fr)) auto;
  gap: 0.48rem;
  align-items: end;
}

.planning-search,
.planning-select {
  min-width: 0;
}

.planning-search {
  position: relative;
  display: block;
}

.planning-search svg {
  position: absolute;
  top: 50%;
  left: 0.72rem;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: #8f989e;
  stroke-width: 1.6;
  transform: translateY(-50%);
  pointer-events: none;
}

.planning-search input,
.planning-select select,
.planning-form-field input,
.planning-form-field select,
.planning-form-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 12px;
  outline: none;
  background: rgba(7, 9, 10, 0.72);
  color: var(--text);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.planning-search input {
  min-height: 2.5rem;
  padding: 0.62rem 0.7rem 0.62rem 2.25rem;
  font-size: 0.78rem;
}

.planning-search input::placeholder {
  color: #6f777c;
}

.planning-select {
  display: grid;
  gap: 0.25rem;
}

.planning-select > span,
.planning-form-field > span,
.planning-form-field legend {
  color: #858e94;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.planning-select select {
  min-height: 2.5rem;
  padding: 0.58rem 1.7rem 0.58rem 0.62rem;
  font-size: 0.72rem;
}

.planning-search input:focus,
.planning-select select:focus,
.planning-form-field input:focus,
.planning-form-field select:focus,
.planning-form-field textarea:focus {
  border-color: rgba(230, 237, 240, 0.28);
  background: rgba(10, 12, 13, 0.88);
  box-shadow: 0 0 0 2px rgba(230, 237, 240, 0.055);
}

.planning-select option,
.planning-form-field option {
  color: #e8ecee;
  background: #111416;
}

.clear-filters {
  min-height: 2.5rem;
  padding: 0.5rem 0.68rem;
  border-radius: 12px;
  background: transparent;
  color: #8e979c;
  font-size: 0.68rem;
  font-weight: 800;
}

.clear-filters:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.active-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  padding-top: 0.65rem;
}

.active-filter-row p {
  margin: 0;
  color: #858e94;
  font-size: 0.7rem;
  white-space: nowrap;
}

.active-filter-tags {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.active-filter-token {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.55rem;
  padding: 0.24rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #a8b0b5;
  font-size: 0.62rem;
}

.active-filter-token button {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  color: inherit;
  cursor: pointer;
}

.roadmap-shell {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0, rgba(148, 160, 168, 0.05), transparent 24rem),
    rgba(9, 11, 12, 0.66);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.roadmap-shell__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.roadmap-shell__header .eyebrow {
  margin-bottom: 0.35rem;
}

.roadmap-shell__header h2 {
  margin: 0;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: -0.025em;
}

.roadmap-scroll-controls {
  display: flex;
  gap: 0.4rem;
}

.roadmap-scroll-controls button,
.card-drawer__chrome button,
.planning-dialog__close,
.icon-button {
  display: grid;
  place-items: center;
  min-width: 2.45rem;
  min-height: 2.45rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
  color: #aab2b7;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.roadmap-scroll-controls button:hover,
.card-drawer__chrome button:hover,
.planning-dialog__close:hover,
.icon-button:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.065);
}

.roadmap-scroll {
  position: relative;
  max-height: min(74vh, 64rem);
  overflow: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-color: rgba(217, 225, 229, 0.22) rgba(255, 255, 255, 0.025);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.roadmap-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.roadmap-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.018);
}

.roadmap-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(217, 225, 229, 0.18);
  background-clip: padding-box;
}

.roadmap-canvas {
  position: relative;
  width: max-content;
  min-width: 100%;
  min-height: 34rem;
  padding: 0.8rem;
}

.planning-card-board {
  position: relative;
  z-index: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--plan-column);
  gap: var(--plan-gap);
  align-items: start;
}

.week-column {
  --phase-accent: #9aa4aa;
  position: relative;
  min-height: 31rem;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 18px;
  background: rgba(17, 20, 21, 0.76);
}

.week-column[data-phase="Lock the game"],
.week-column[data-phase="Foundation"],
.week-column[data-phase="Core-feel Slice"] {
  --phase-accent: #a7bac5;
}

.week-column[data-phase="Build the game"],
.week-column[data-phase="Content-complete Alpha"],
.week-column[data-phase="Beta"] {
  --phase-accent: #a8b49d;
}

.week-column[data-phase="Polish and ship"],
.week-column[data-phase="Release Candidate"] {
  --phase-accent: #b8aa98;
}

.week-column[data-phase="Later"] {
  --phase-accent: #858d92;
  border-style: dashed;
}

.week-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--phase-accent), transparent);
  opacity: 0.72;
}

.week-header {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 9.2rem;
  padding: 0.92rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(17, 20, 21, 0.95);
  backdrop-filter: blur(18px);
}

.week-header__top,
.week-header__load {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.week-header__number {
  color: var(--phase-accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.week-header__phase {
  color: #757e83;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.week-header h3 {
  margin: 0.65rem 0 0;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.week-header p {
  display: -webkit-box;
  margin: 0.4rem 0 0.7rem;
  overflow: hidden;
  color: #939ba0;
  font-size: 0.72rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.week-header__load {
  color: #757e83;
  font-size: 0.6rem;
  font-weight: 700;
}

.week-role-loads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.45rem;
}

.week-role-load {
  display: inline-flex;
  gap: 0.22rem;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.15rem 0.34rem;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  color: #7f888d;
  background: rgba(255, 255, 255, 0.018);
  font-size: 0.52rem;
}

.week-role-load strong {
  color: #a2aaaf;
  font-weight: 800;
}

.week-role-load[data-load-state="warning"] {
  color: #c8b88e;
  border-color: rgba(198, 170, 105, 0.22);
  background: rgba(198, 170, 105, 0.06);
}

.week-role-load[data-load-state="warning"] strong {
  color: #d0c29f;
}

.week-role-load[data-load-state="critical"],
.week-role-load[data-over-capacity="true"] {
  color: #c9a29e;
  border-color: rgba(193, 126, 119, 0.2);
  background: rgba(193, 126, 119, 0.055);
  box-shadow: 0 0 0.7rem rgba(193, 126, 119, 0.08);
}

.week-role-load[data-load-state="critical"] strong,
.week-role-load[data-over-capacity="true"] strong {
  color: #d5aaa5;
}

.week-capacity {
  position: relative;
  width: 4.1rem;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.week-capacity > span {
  display: block;
  width: var(--load, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--phase-accent);
  opacity: 0.75;
}

.week-header[data-over-capacity="true"] .week-capacity > span {
  background: #bd8d88;
}

.week-header[data-over-capacity="true"] .week-header__load {
  color: #c9a29e;
}

.week-card-stack {
  display: grid;
  gap: 0.6rem;
  padding: 0.68rem;
}

.week-empty {
  display: grid;
  place-items: center;
  min-height: 10rem;
  padding: 1rem;
  color: #6e777c;
  font-size: 0.74rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.plan-card {
  --discipline-accent: var(--plan-code);
  position: relative;
  z-index: 4;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-left: 2px solid var(--discipline-accent);
  border-radius: 14px;
  background: #151819;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.18);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.plan-card[data-discipline="Code"] {
  --discipline-accent: var(--plan-code);
}

.plan-card[data-discipline="Game Design"] {
  --discipline-accent: var(--plan-design);
}

.plan-card[data-discipline="3D Art"] {
  --discipline-accent: var(--plan-art);
}

.plan-card[data-discipline="Animation"] {
  --discipline-accent: var(--plan-animation);
}

.plan-card[data-discipline="VFX"] {
  --discipline-accent: var(--plan-vfx);
}

.plan-card[data-discipline="Audio"] {
  --discipline-accent: var(--plan-audio);
}

.plan-card[data-discipline="UI/UX"] {
  --discipline-accent: var(--plan-ui);
}

.plan-card[data-discipline="QA"] {
  --discipline-accent: var(--plan-qa);
}

.plan-card[data-discipline="Production"] {
  --discipline-accent: var(--plan-production);
}

.plan-card:hover,
.plan-card:focus-within,
.plan-card.is-selected {
  z-index: 5;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--discipline-accent) 34%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--discipline-accent) 8%, transparent);
}

.plan-card.is-gate {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--discipline-accent) 8%, transparent), transparent 55%),
    #171a1b;
}

.plan-card.is-saving::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: rgba(10, 12, 13, 0.58);
  backdrop-filter: blur(2px);
}

.plan-card__open {
  display: block;
  width: 100%;
  padding: 0.78rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.plan-card__top,
.plan-card__bottom,
.plan-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.plan-card__id {
  color: #778087;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.59rem;
  letter-spacing: 0.06em;
}

.card-state,
.card-scope {
  min-height: 1.35rem;
  padding: 0.18rem 0.43rem;
  color: #9fa7ac;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-scope[data-scope="Must"] {
  color: #eef2f4;
  border-color: rgba(235, 241, 244, 0.17);
  background: rgba(235, 241, 244, 0.07);
}

.card-scope[data-scope="Should"] {
  color: #b9c2c7;
}

.card-scope[data-scope="Could"] {
  color: #7f888e;
}

.card-state[data-status="Blocked"] {
  color: #d0a4a0;
  border-color: rgba(193, 126, 119, 0.2);
}

.card-state[data-status="Done"] {
  color: #a8c2ae;
  border-color: rgba(132, 182, 145, 0.18);
}

.plan-card h4 {
  margin: 0.6rem 0 0;
  color: #edf1f3;
  font-size: 0.9rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.plan-card__summary {
  display: -webkit-box;
  margin: 0.4rem 0 0;
  overflow: hidden;
  color: #90999e;
  font-size: 0.69rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.plan-card__meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.58rem;
  color: #788187;
  font-size: 0.6rem;
}

.plan-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.plan-card__meta span + span::before {
  content: "·";
  margin-right: 0.25rem;
  color: #4f575b;
}

.plan-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.58rem;
  padding: 0 0.78rem;
}

.plan-tag,
.tag-button {
  min-height: 1.35rem;
  padding: 0.18rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.022);
  color: #8d969b;
  font-size: 0.56rem;
  line-height: 1;
}

.tag-button:hover {
  color: #e8edef;
  border-color: rgba(255, 255, 255, 0.14);
}

.plan-card__bottom {
  margin-top: 0.62rem;
  padding: 0.55rem 0.78rem 0.72rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-card__discipline {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #a0a8ad;
  font-size: 0.58rem;
  font-weight: 800;
}

.plan-card__discipline::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--discipline-accent);
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--discipline-accent) 36%, transparent);
}

.dependency-count {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #7f888d;
  font-size: 0.57rem;
}

.dependency-count::before {
  content: "";
  width: 0.52rem;
  height: 0.28rem;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: skewX(-28deg);
}

.dependency-count.has-hidden {
  color: #c1a98b;
}

.dependency-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.dependency-layer.is-visible {
  display: block;
}

.dependency-line {
  fill: none;
  stroke: rgba(195, 204, 209, 0.23);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transition:
    stroke 150ms ease,
    opacity 150ms ease,
    stroke-width 150ms ease;
}

.dependency-line[data-relation="related"] {
  stroke: rgba(171, 181, 187, 0.17);
  stroke-dasharray: 5 6;
}

.dependency-line.is-backward {
  stroke: rgba(190, 143, 133, 0.38);
}

.dependency-line.is-muted {
  opacity: 0.14;
}

.dependency-line.is-connected {
  stroke: rgba(238, 243, 245, 0.66);
  stroke-width: 1.8;
}

.dependency-node {
  fill: #dce3e7;
  opacity: 0.7;
}

.plan-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.plan-note {
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 18px;
  background: rgba(14, 17, 18, 0.68);
}

.plan-note span {
  color: #8d969c;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plan-note h3 {
  margin: 0.52rem 0 0;
  font-size: 0.92rem;
}

.plan-note p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.58;
}

.plan-note--post-launch {
  grid-column: 1 / -1;
}

.plan-note__cut-line-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.plan-note__cut-line-head > div {
  min-width: 0;
}

.plan-note__cut-line-head strong {
  flex: none;
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #a4adb2;
  font-size: 0.62rem;
}

.post-launch-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem 1rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.post-launch-list li {
  position: relative;
  padding-left: 0.85rem;
  color: #8f989d;
  font-size: 0.7rem;
  line-height: 1.45;
}

.post-launch-list li::before {
  content: "";
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #7d868b;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  background: rgba(3, 5, 6, 0.62);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity 190ms ease;
}

.drawer-backdrop.is-open {
  opacity: 1;
}

.card-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(43rem, calc(100vw - 2rem));
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 80% 0, rgba(186, 197, 204, 0.08), transparent 24rem),
    #0d1011;
  box-shadow: -35px 0 90px rgba(0, 0, 0, 0.48);
  transform: translateX(105%);
  transition: transform 230ms cubic-bezier(0.22, 0.7, 0.24, 1);
}

.card-drawer[hidden] {
  display: none;
}

.card-drawer.is-open {
  transform: translateX(0);
}

.card-drawer__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.6rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(11, 13, 14, 0.74);
  backdrop-filter: blur(18px);
}

.card-drawer__chrome p {
  margin: 0;
  color: #8e979c;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card-drawer__chrome button {
  width: auto;
  padding: 0.55rem 0.78rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.card-drawer__body {
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 1.6rem);
}

.card-detail {
  display: grid;
  gap: 1.15rem;
}

.card-detail__head {
  display: grid;
  gap: 0.75rem;
}

.card-detail__head h2 {
  max-width: 18ch;
  margin: 0;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.card-detail__id {
  margin: 0;
  color: #818a90;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.67rem;
}

.card-detail__pills,
.card-detail__tags,
.card-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.detail-pill,
.relation-kind {
  min-height: 1.7rem;
  padding: 0.28rem 0.58rem;
  color: #adb5ba;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.62rem;
  font-weight: 700;
}

.card-detail__section {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.card-detail__section h3 {
  margin: 0 0 0.55rem;
  color: #aab2b7;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-detail__section p {
  margin: 0;
  color: #a1a9ae;
  font-size: 0.88rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

.acceptance-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acceptance-list li {
  position: relative;
  padding-left: 1.5rem;
  color: #a6aeb3;
  font-size: 0.82rem;
  line-height: 1.55;
}

.acceptance-list li::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid rgba(225, 232, 236, 0.22);
  border-radius: 0.2rem;
  box-shadow: 0 0 0.45rem rgba(225, 232, 236, 0.04) inset;
}

.relation-list {
  display: grid;
  gap: 0.45rem;
}

.relation-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  text-align: left;
}

.relation-card:hover {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.relation-card strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation-card > span:last-child {
  color: #7f888e;
  font-size: 0.6rem;
}

.card-detail__actions {
  padding-top: 0.2rem;
}

.card-action {
  min-height: 2.55rem;
  padding: 0.62rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #b5bdc1;
  font-size: 0.7rem;
  font-weight: 800;
}

.card-action:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.06);
}

.card-action--danger {
  color: #c8a09c;
  border-color: rgba(191, 123, 116, 0.16);
}

.planning-card-form {
  display: grid;
  gap: 0.9rem;
}

.planning-card-form h2 {
  margin: 0 0 0.25rem;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.8rem;
  letter-spacing: -0.035em;
}

.planning-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.planning-form-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.planning-form-field--wide {
  grid-column: 1 / -1;
}

.planning-form-field input,
.planning-form-field select,
.planning-form-field textarea {
  min-height: 2.75rem;
  padding: 0.68rem 0.75rem;
  font-size: 0.78rem;
}

.planning-form-field textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.55;
}

.planning-form-field input[type="checkbox"] {
  width: 1rem;
  min-height: 1rem;
  accent-color: #dfe5e8;
}

.planning-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding-top: 1rem;
  color: #a9b1b6;
  font-size: 0.75rem;
}

.relation-editor {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.018);
}

.relation-editor__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.relation-editor select[multiple] {
  min-height: 9rem;
  padding: 0.35rem;
  line-height: 1.45;
}

.relation-editor select[multiple] option {
  padding: 0.35rem 0.4rem;
  border-radius: 0.35rem;
}

.relation-editor small {
  color: #778086;
  font-size: 0.64rem;
  line-height: 1.45;
}

.relation-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.55rem;
}

.relation-editor__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.32rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #a2aaaf;
  font-size: 0.61rem;
}

.relation-editor__chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation-editor__chip button {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  cursor: pointer;
}

.form-actions {
  position: sticky;
  bottom: -1.6rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0 -1.6rem -1.6rem;
  padding: 0.9rem 1.6rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(13, 16, 17, 0.94);
  backdrop-filter: blur(18px);
}

.button.is-busy {
  gap: 0.48rem;
  pointer-events: none;
}

.planning-dialog {
  width: min(31rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 0;
  color: var(--text);
  background: transparent;
}

.planning-dialog::backdrop {
  background: rgba(3, 5, 6, 0.7);
  backdrop-filter: blur(12px);
}

.planning-dialog__card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 0, rgba(190, 201, 207, 0.09), transparent 18rem),
    #111415;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.52);
}

.planning-dialog__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  font-size: 1.1rem;
}

.planning-dialog__mark {
  width: 3.2rem;
  height: 3.2rem;
  filter: drop-shadow(0 0 0.6rem rgba(235, 242, 245, 0.17));
}

.planning-dialog__card .eyebrow {
  margin: 0;
}

.planning-dialog__card h2 {
  margin: 0;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.6rem;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.planning-dialog__card > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.planning-dialog__status {
  min-height: 1.2rem;
  color: #b9a08f !important;
}

.planning-dialog__status[data-tone="success"] {
  color: #a7c0ad !important;
}

.planning-dialog__status[data-tone="error"] {
  color: #c9a09c !important;
}

.auth-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.planning-toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: grid;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.planning-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(18, 21, 22, 0.94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  animation: toast-in 180ms ease-out;
}

.planning-toast::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #c4ccd0;
  box-shadow: 0 0 0.55rem rgba(229, 235, 238, 0.34);
}

.planning-toast[data-tone="success"]::before {
  background: #9db8a4;
}

.planning-toast[data-tone="error"]::before {
  background: #bd8d88;
}

.planning-toast strong {
  font-size: 0.74rem;
  line-height: 1.45;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@media (max-width: 1260px) {
  .plan-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .planning-toolbar__primary {
    align-items: stretch;
    flex-direction: column;
  }

  .planning-toolbar__actions {
    justify-content: flex-end;
  }

  .planning-toolbar__secondary {
    grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(8rem, 0.4fr));
  }

  .planning-toolbar__secondary .planning-select:nth-of-type(4),
  .planning-toolbar__secondary .planning-select:nth-of-type(5) {
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .planning-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .planning-hero__status {
    min-width: 0;
    width: min(100%, 28rem);
  }

  .plan-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-toolbar {
    position: static;
  }

  .planning-toolbar__secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-search {
    grid-column: 1 / -1;
  }

  .plan-notes {
    grid-template-columns: 1fr;
  }

  .post-launch-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :root {
    --plan-column: min(86vw, 20rem);
  }

  .planning-main {
    padding-top: calc(10.25rem + env(safe-area-inset-top, 0px));
  }

  .planning-hero {
    padding-top: 2.5rem;
  }

  .planning-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 12vw, 4rem);
  }

  .scope-pill {
    max-width: 100%;
    align-items: flex-start;
    line-height: 1.35;
    white-space: normal;
  }

  .planning-hero__status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .release-orbit {
    width: 3.3rem;
    height: 3.3rem;
  }

  .planning-app {
    padding-inline: 0.55rem;
  }

  .plan-kpi {
    padding: 0.8rem;
  }

  .planning-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-action {
    min-height: 2.75rem;
  }

  .planning-toolbar__secondary {
    grid-template-columns: 1fr 1fr;
  }

  .active-filter-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .active-filter-tags {
    justify-content: flex-start;
  }

  .roadmap-shell__header {
    align-items: flex-start;
  }

  .roadmap-scroll {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
  }

  .roadmap-canvas {
    padding: 0.6rem;
  }

  .card-drawer {
    top: max(0.45rem, env(safe-area-inset-top, 0px));
    right: 0.45rem;
    bottom: 0;
    width: calc(100vw - 0.9rem);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
  }

  .planning-form-grid {
    grid-template-columns: 1fr;
  }

  .planning-form-field--wide {
    grid-column: auto;
  }

  .form-actions {
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .planning-error {
    grid-template-columns: 1fr;
  }

  .planning-error img {
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .plan-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .planning-toolbar__secondary {
    grid-template-columns: 1fr;
  }

  .planning-search {
    grid-column: auto;
  }

  .clear-filters {
    min-height: 2.75rem;
  }

  .roadmap-scroll-controls {
    display: none;
  }

  .post-launch-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .release-orbit > span:nth-child(2),
  .arcane-spinner {
    animation: none;
  }

  .planning-gateway,
  .discipline-chip,
  .plan-card,
  .card-drawer,
  .drawer-backdrop,
  .planning-toast {
    transition: none;
  }

  .roadmap-scroll {
    scroll-behavior: auto;
  }
}

/* Active-work lanes, persistent ordering, and cool atmospheric light ---------- */
body[data-page="planning"] {
  background:
    radial-gradient(ellipse at 72% 7%, rgba(132, 188, 226, 0.09), transparent 31rem),
    radial-gradient(ellipse at 7% 44%, rgba(99, 162, 205, 0.065), transparent 36rem),
    linear-gradient(180deg, #181c1f 0%, #14191d 54%, #101417 100%);
}

body[data-page="planning"]::before {
  display: block;
  background:
    radial-gradient(ellipse 27% 19% at 12% 24%, rgba(112, 185, 232, 0.14), transparent 72%),
    radial-gradient(ellipse 22% 28% at 73% 16%, rgba(92, 159, 211, 0.11), transparent 74%),
    radial-gradient(ellipse 30% 19% at 48% 62%, rgba(141, 202, 239, 0.1), transparent 76%),
    radial-gradient(ellipse 24% 24% at 90% 81%, rgba(105, 176, 222, 0.105), transparent 75%);
  filter: blur(52px) saturate(1.04);
  opacity: 0.46;
}

body[data-page="planning"]::after {
  display: block;
  background:
    radial-gradient(ellipse 17% 22% at 26% 78%, rgba(211, 235, 248, 0.072), transparent 78%),
    radial-gradient(ellipse 13% 17% at 67% 43%, rgba(239, 246, 248, 0.052), transparent 79%),
    radial-gradient(ellipse 14% 19% at 96% 20%, rgba(195, 225, 243, 0.057), transparent 76%);
  filter: blur(82px) saturate(0.96);
  opacity: 0.34;
}

.plan-card,
#planning-card-board[data-view="weeks"] .plan-card {
  background:
    radial-gradient(ellipse at 88% 112%, rgba(121, 184, 224, 0.052), transparent 54%),
    radial-gradient(circle at 14% -24%, rgba(239, 247, 251, 0.07), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 4%, transparent), transparent 56%),
    rgba(40, 45, 48, 0.94);
}

.plan-card:is(:hover, :focus-within, .is-selected),
#planning-card-board[data-view="weeks"] .plan-card:is(:hover, :focus-within, .is-selected) {
  background:
    radial-gradient(ellipse at 88% 112%, rgba(151, 207, 240, 0.078), transparent 56%),
    radial-gradient(circle at 14% -24%, rgba(245, 250, 252, 0.105), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 7%, transparent), transparent 58%),
    rgba(47, 53, 57, 0.97);
}

#planning-card-board[data-view="weeks"] .planning-week-board {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 64rem;
}

#planning-card-board[data-view="weeks"] .week-lane-row {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
}

#planning-card-board[data-view="weeks"] .planning-week-grid {
  align-items: stretch;
}

#planning-card-board[data-view="weeks"] .week-column {
  height: 30rem;
  min-height: 30rem;
  max-height: 30rem;
  overflow: visible;
  background:
    radial-gradient(ellipse at 78% -8%, rgba(126, 189, 229, 0.068), transparent 46%),
    linear-gradient(155deg, rgba(245, 250, 252, 0.034), transparent 42%),
    rgba(15, 19, 22, 0.68);
}

#planning-card-board[data-view="weeks"] .week-lane-row[data-week-lane="working"] .week-column {
  border-color: rgba(155, 208, 238, 0.115);
  background:
    radial-gradient(ellipse at 78% -8%, rgba(132, 201, 242, 0.082), transparent 48%),
    linear-gradient(155deg, rgba(239, 248, 252, 0.04), transparent 42%),
    rgba(16, 21, 25, 0.72);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.19),
    inset 0 1px 0 rgba(239, 249, 253, 0.045),
    0 0 1.8rem rgba(104, 181, 226, 0.025);
}

#planning-card-board[data-view="weeks"] .week-column::before {
  background: rgba(101, 178, 225, 0.052);
}

#planning-card-board[data-view="weeks"] .week-header {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  overflow: visible;
}

#planning-card-board[data-view="weeks"] .week-header__week-slot {
  overflow: hidden;
  padding-left: 4.15rem;
  background:
    radial-gradient(ellipse at 12% -30%, rgba(132, 199, 239, 0.17), transparent 66%),
    radial-gradient(ellipse at 94% 140%, rgba(191, 224, 243, 0.085), transparent 65%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.075), transparent 31%, rgba(0, 0, 0, 0.12) 68%),
    #20272c;
}

.week-header__week-name {
  display: flex;
  gap: 0.54rem;
  align-items: baseline;
}

.week-header__week-name > span {
  color: #b2d6e9;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(0.95rem, 1.08vw, 1.14rem);
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 1rem rgba(128, 200, 239, 0.2);
}

.week-add-card {
  position: absolute;
  z-index: 14;
  top: 1.16rem;
  left: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(203, 230, 244, 0.17);
  border-radius: 10px;
  color: #d9edf7;
  background:
    radial-gradient(circle at 50% 120%, rgba(122, 194, 235, 0.16), transparent 70%),
    rgba(13, 20, 24, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 19px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  transition: transform 170ms ease, border-color 170ms ease, color 170ms ease, box-shadow 170ms ease;
}

.week-add-card svg {
  width: 1.08rem;
  height: 1.08rem;
}

.week-add-card:is(:hover, :focus-visible) {
  border-color: rgba(209, 235, 248, 0.35);
  color: #f4fbfe;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.25),
    0 0 1rem rgba(151, 216, 247, 0.13);
  transform: translateY(-2px);
}

.week-add-card:focus-visible {
  outline: 2px solid rgba(207, 235, 249, 0.62);
  outline-offset: 2px;
}

.week-add-card.is-locked {
  color: #91a6b1;
  border-color: rgba(196, 220, 232, 0.1);
}

.week-add-card::after {
  top: calc(100% + 0.48rem);
  right: auto;
  left: 0;
  transform: translate(0, -0.2rem) scale(0.98);
  transform-origin: top left;
}

.week-add-card:is(:hover, :focus-visible)::after {
  transform: translate(0, 0) scale(1);
}

.week-card-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#planning-card-board[data-view="weeks"] .week-add-card {
  position: absolute;
  z-index: 14;
  top: 1.16rem;
  left: 0.9rem;
}

#planning-card-board[data-view="weeks"] .week-add-card::after {
  top: calc(100% + 0.48rem);
  right: auto;
  left: 0;
  transform: translate(0, -0.2rem) scale(0.98);
  transform-origin: top left;
}

#planning-card-board[data-view="weeks"] .week-add-card:is(:hover, :focus-visible)::after {
  transform: translate(0, 0) scale(1);
}

#planning-card-board[data-view="weeks"] .week-card-stack {
  display: grid;
  gap: 0.52rem;
  align-content: start;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 0.36rem 0.18rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#planning-card-board[data-view="weeks"] .week-card-stack::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.week-scroll-indicator {
  position: absolute;
  z-index: 18;
  top: 8px;
  right: 2px;
  bottom: 8px;
  width: 4px;
  overflow: hidden;
  border: 1px solid rgba(219, 237, 246, 0.055);
  border-radius: 999px;
  background: rgba(226, 241, 248, 0.025);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}

.week-scroll-indicator > span {
  display: block;
  width: 100%;
  height: var(--week-scroll-thumb-size, 30px);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(239, 248, 252, 0.68), rgba(133, 192, 224, 0.35));
  box-shadow: 0 0 0.65rem rgba(195, 230, 248, 0.2);
  transform: translateY(var(--week-scroll-thumb-offset, 0));
  transition: height 120ms linear, transform 80ms linear;
}

.week-card-scroll.can-scroll.is-scrolling .week-scroll-indicator {
  opacity: 0.82;
  transition-duration: 100ms;
}

.planning-drop-zone {
  transition: background 170ms ease, box-shadow 170ms ease;
}

.planning-drop-zone.is-drop-target {
  background-color: rgba(116, 190, 231, 0.04);
  box-shadow: inset 0 0 0 1px rgba(154, 211, 241, 0.16);
}

.plan-card.is-reorderable {
  cursor: grab;
}

.plan-card.is-reorderable::after {
  content: "";
  position: absolute;
  z-index: 7;
  top: 0.58rem;
  left: 0.58rem;
  width: 0.72rem;
  height: 1rem;
  background-image: radial-gradient(circle, rgba(219, 234, 242, 0.52) 1.15px, transparent 1.4px);
  background-size: 0.36rem 0.36rem;
  opacity: 0.42;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.plan-card.is-reorderable:is(:hover, :focus-within)::after {
  opacity: 0.82;
}

.plan-card.is-reorderable .plan-card__open {
  cursor: grab;
}

.plan-card.is-dragged,
.plan-card.is-dragged .plan-card__open {
  cursor: grabbing;
}

.plan-card.is-dragged {
  z-index: 30;
  opacity: 0.46;
  transform: scale(0.975) rotate(-0.4deg);
  box-shadow: 0 0 0 1px rgba(179, 222, 244, 0.25), 0 16px 34px rgba(0, 0, 0, 0.25);
}

.planning-card-board.is-dragging .week-empty {
  pointer-events: none;
}

.board-reorder-progress {
  position: fixed;
  z-index: 260;
  top: calc(var(--planning-header-height, 4.2rem) + 0.85rem);
  left: 50%;
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.48rem 0.82rem;
  border: 1px solid rgba(202, 228, 241, 0.16);
  border-radius: 999px;
  color: #d9eaf2;
  background: rgba(13, 19, 23, 0.86);
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.34), 0 0 1.1rem rgba(157, 215, 244, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
  font-size: 0.76rem;
  font-weight: 650;
  transform: translateX(-50%);
}

.card-detail__working {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.05rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(177, 213, 232, 0.1);
  border-radius: 13px;
  background:
    radial-gradient(circle at 0 120%, rgba(117, 191, 232, 0.09), transparent 52%),
    rgba(255, 255, 255, 0.022);
}

.card-detail__working[data-working="true"] {
  border-color: rgba(157, 215, 244, 0.2);
  background:
    radial-gradient(circle at 0 120%, rgba(118, 199, 242, 0.15), transparent 55%),
    rgba(156, 213, 242, 0.035);
}

.card-detail__working-state {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: #afbec6;
  font-size: 0.88rem;
  font-weight: 620;
}

.card-detail__working-state > span {
  width: 0.58rem;
  height: 0.58rem;
  border: 1px solid rgba(217, 232, 240, 0.2);
  border-radius: 50%;
  background: #69777e;
}

.card-detail__working[data-working="true"] .card-detail__working-state {
  color: #d9edf7;
}

.card-detail__working[data-working="true"] .card-detail__working-state > span {
  border-color: rgba(206, 238, 252, 0.45);
  background: #8ed0f0;
  box-shadow: 0 0 0.75rem rgba(133, 209, 244, 0.32);
}

.card-action--working {
  position: relative;
  border-color: rgba(176, 216, 236, 0.16);
  color: #d5e8f1;
}

.planning-checkbox--working {
  display: flex;
  gap: 0.72rem;
  align-items: flex-start;
  padding: 0.78rem;
  border: 1px solid rgba(169, 211, 232, 0.12);
  border-radius: 12px;
  background: rgba(121, 189, 226, 0.035);
}

.planning-checkbox--working > span {
  display: grid;
  gap: 0.2rem;
}

.planning-checkbox--working strong {
  color: #dcecf4;
  font-size: 0.88rem;
  font-weight: 650;
}

.planning-checkbox--working small {
  color: #8fa2ac;
  font-size: 0.75rem;
  line-height: 1.45;
}

@media (max-width: 840px) {
  #planning-card-board[data-view="weeks"] .planning-week-board {
    min-width: 58rem;
  }

  #planning-card-board[data-view="weeks"] .planning-week-grid {
    min-width: 58rem;
    grid-template-columns: repeat(4, minmax(13.75rem, 1fr));
  }
}

@media (max-width: 620px) {
  body[data-page="planning"]::after {
    display: none;
  }

  #planning-card-board[data-view="weeks"] .week-column {
    height: 26rem;
    min-height: 26rem;
    max-height: 26rem;
  }

}

@media (hover: none), (pointer: coarse) {
  .plan-card.is-reorderable::after {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .week-scroll-indicator,
  .week-scroll-indicator > span,
  .week-add-card,
  .plan-card.is-reorderable::after {
    transition: none;
  }
}

/* Week-board mode and restrained forest-light atmosphere ---------------- */

body[data-page="planning"] {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 72% 8%, rgba(123, 171, 139, 0.075), transparent 29rem),
    radial-gradient(ellipse at 9% 42%, rgba(85, 132, 103, 0.07), transparent 34rem),
    linear-gradient(180deg, #171a19 0%, #121514 54%, #0e1110 100%);
}

body[data-page="planning"]::before,
body[data-page="planning"]::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -24vh -18vw;
  pointer-events: none;
  will-change: transform, opacity;
}

body[data-page="planning"]::before {
  background:
    radial-gradient(ellipse 27% 19% at 12% 24%, rgba(130, 214, 157, 0.13), transparent 72%),
    radial-gradient(ellipse 22% 28% at 73% 16%, rgba(87, 176, 119, 0.105), transparent 74%),
    radial-gradient(ellipse 30% 19% at 48% 62%, rgba(138, 224, 162, 0.095), transparent 76%),
    radial-gradient(ellipse 24% 24% at 90% 81%, rgba(94, 188, 126, 0.105), transparent 75%);
  filter: blur(48px) saturate(1.08);
  opacity: 0.52;
  mix-blend-mode: screen;
  animation: planning-forest-mist-a 34s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

body[data-page="planning"]::after {
  inset: -30vh -24vw;
  background:
    radial-gradient(ellipse 20% 30% at 27% 78%, rgba(111, 185, 132, 0.08), transparent 76%),
    radial-gradient(ellipse 28% 17% at 64% 42%, rgba(168, 227, 180, 0.065), transparent 77%),
    radial-gradient(ellipse 18% 24% at 96% 22%, rgba(103, 193, 133, 0.075), transparent 74%);
  filter: blur(76px) saturate(1.12);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: planning-forest-mist-b 47s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate-reverse;
}

.planning-site-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

.planning-app,
.planning-content,
.card-grid-shell,
.roadmap-scroll,
.roadmap-canvas,
.planning-card-board {
  background-color: transparent;
}

.plan-card {
  background:
    radial-gradient(ellipse at 88% 112%, rgba(137, 206, 158, 0.055), transparent 52%),
    radial-gradient(circle at 14% -24%, rgba(255, 255, 255, 0.062), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 4%, transparent), transparent 54%),
    rgba(39, 44, 42, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
}

.plan-card:hover,
.plan-card:focus-within,
.plan-card.is-selected {
  background:
    radial-gradient(ellipse at 88% 112%, rgba(151, 221, 171, 0.075), transparent 54%),
    radial-gradient(circle at 14% -24%, rgba(255, 255, 255, 0.1), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 7%, transparent), transparent 58%),
    rgba(46, 52, 49, 0.965);
}

.planning-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, 2.45rem);
  align-items: center;
  padding: 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(12, 16, 14, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 22px rgba(0, 0, 0, 0.17);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
  backdrop-filter: blur(20px) saturate(1.14);
}

.planning-view-toggle__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #89948f;
  background: transparent;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.planning-view-toggle__button svg {
  width: 1rem;
  height: 1rem;
}

.planning-view-toggle__button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.planning-view-toggle__button:hover {
  color: #e8efeb;
  transform: translateY(-1px);
}

.planning-view-toggle__button[aria-pressed="true"] {
  border-color: rgba(191, 231, 201, 0.18);
  color: #eef5f0;
  background:
    radial-gradient(circle at 50% 115%, rgba(134, 213, 158, 0.13), transparent 70%),
    rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0.85rem rgba(151, 220, 170, 0.055);
}

.planning-view-toggle__button:focus-visible,
.planning-week-navigation__button:focus-visible {
  outline: 2px solid rgba(222, 240, 226, 0.66);
  outline-offset: 2px;
}

.planning-week-navigation {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 2.35rem minmax(7.5rem, auto) 2.35rem;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 0.72rem;
  padding: 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(118, 196, 143, 0.075), transparent 74%),
    rgba(17, 21, 19, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 34px rgba(0, 0, 0, 0.21);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}

.planning-week-navigation[hidden] {
  display: none;
}

.planning-week-navigation__button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #a9b5af;
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    transform 180ms cubic-bezier(0.2, 0.75, 0.2, 1),
    box-shadow 180ms ease;
}

.planning-week-navigation__button svg {
  width: 1rem;
  height: 1rem;
}

.planning-week-navigation__button:not(:disabled):hover {
  border-color: rgba(255, 255, 255, 0.11);
  color: #f4f8f5;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 0 0.8rem rgba(185, 227, 196, 0.07);
  transform: translateY(-1px);
}

.planning-week-navigation__button:disabled {
  color: #56605b;
  cursor: default;
  opacity: 0.48;
}

.planning-week-navigation__label {
  color: #cbd5cf;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-align: center;
  text-transform: uppercase;
}

#planning-card-board[data-view="weeks"] {
  display: block;
  width: 100%;
  min-width: 0;
}

#planning-card-board[data-view="weeks"] .planning-week-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(15.5rem, 1fr));
  gap: clamp(0.65rem, 0.9vw, 0.95rem);
  width: 100%;
  min-width: 64rem;
  align-items: start;
}

#planning-card-board[data-view="weeks"] .week-column {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 31rem;
  padding: 0.55rem;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 80% -6%, rgba(147, 214, 165, 0.06), transparent 43%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(15, 19, 17, 0.64);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  backdrop-filter: blur(22px) saturate(1.12);
}

#planning-card-board[data-view="weeks"] .week-column::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 8% auto;
  height: 42%;
  border-radius: 50%;
  background: rgba(106, 191, 132, 0.045);
  filter: blur(38px);
  opacity: 0.68;
  pointer-events: none;
}

#planning-card-board[data-view="weeks"] .week-header {
  display: grid;
  gap: 0.35rem;
  min-height: 8.1rem;
  margin: -0.05rem -0.05rem 0.55rem;
  padding: 0.75rem 0.75rem 0.68rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px 12px 7px 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent);
}

#planning-card-board[data-view="weeks"] .week-header__top,
#planning-card-board[data-view="weeks"] .week-header__load {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#planning-card-board[data-view="weeks"] .week-header__number,
#planning-card-board[data-view="weeks"] .week-header__phase {
  display: inline-flex;
  color: #aeb9b3;
  font-family: "Manrope", sans-serif;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.095em;
  line-height: 1;
  text-transform: uppercase;
}

#planning-card-board[data-view="weeks"] .week-header__phase {
  max-width: 11ch;
  overflow: hidden;
  color: rgba(176, 206, 185, 0.72);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#planning-card-board[data-view="weeks"] .week-header h3 {
  margin: 0.05rem 0 0;
  color: #edf2ef;
  font-family: "Manrope", sans-serif;
  font-size: clamp(0.94rem, 1vw, 1.08rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.022em;
}

#planning-card-board[data-view="weeks"] .week-header p {
  display: -webkit-box;
  min-height: 2.42em;
  margin: 0;
  overflow: hidden;
  color: #87928c;
  font-size: 0.7rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#planning-card-board[data-view="weeks"] .week-header__load {
  align-self: end;
  color: #69746f;
  font-size: 0.63rem;
  line-height: 1;
}

#planning-card-board[data-view="weeks"] .week-card-stack {
  display: grid;
  gap: 0.52rem;
  align-content: start;
}

#planning-card-board[data-view="weeks"] .plan-card {
  min-height: 4.65rem;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 92% 125%, rgba(134, 208, 156, 0.055), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 4%, transparent), transparent 58%),
    rgba(40, 45, 43, 0.93);
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#planning-card-board[data-view="weeks"] .plan-card__open {
  min-height: 4.65rem;
  padding: 0.86rem 0.88rem 1rem;
}

#planning-card-board[data-view="weeks"] .plan-card h4 {
  font-size: clamp(0.84rem, 0.9vw, 0.96rem);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}

#planning-card-board[data-view="weeks"] .plan-card:hover,
#planning-card-board[data-view="weeks"] .plan-card:focus-within,
#planning-card-board[data-view="weeks"] .plan-card.is-selected {
  transform: translateY(-3px) scale(1.01);
  background:
    radial-gradient(ellipse at 92% 125%, rgba(151, 222, 173, 0.085), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 7%, transparent), transparent 60%),
    rgba(48, 54, 51, 0.97);
  box-shadow:
    0 19px 34px -16px rgba(0, 0, 0, 0.74),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 20px rgba(239, 250, 242, 0.048),
    0 0 26px color-mix(in srgb, var(--discipline-accent) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#planning-card-board[data-view="weeks"] .week-empty {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  margin: 0;
  padding: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  color: #69736e;
  font-size: 0.72rem;
  text-align: center;
}

.planning-unscheduled {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(16, 19, 18, 0.62);
}

.planning-unscheduled__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.planning-unscheduled__header h3,
.planning-unscheduled__header p {
  margin: 0;
}

.planning-unscheduled__header h3 {
  font-family: "Manrope", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

.planning-unscheduled__header p {
  color: #7e8983;
  font-size: 0.68rem;
}

.planning-unscheduled__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.55rem;
}

@keyframes planning-forest-mist-a {
  0% {
    opacity: 0.4;
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }

  48% {
    opacity: 0.54;
    transform: translate3d(2.5%, 1.7%, 0) scale(1.045) rotate(0.35deg);
  }

  100% {
    opacity: 0.46;
    transform: translate3d(-0.5%, 3%, 0) scale(1.075) rotate(-0.35deg);
  }
}

@keyframes planning-forest-mist-b {
  0% {
    opacity: 0.3;
    transform: translate3d(2%, 1%, 0) scale(1.02);
  }

  55% {
    opacity: 0.44;
    transform: translate3d(-2.2%, -1.5%, 0) scale(1.06) rotate(-0.4deg);
  }

  100% {
    opacity: 0.35;
    transform: translate3d(1%, -2.5%, 0) scale(1.09) rotate(0.35deg);
  }
}

@media (max-width: 1180px) {
  #planning-card-board[data-view="weeks"] .planning-week-grid {
    grid-template-columns: repeat(4, minmax(15rem, 1fr));
    min-width: 62rem;
  }
}

@media (max-width: 620px) {
  .planning-view-toggle {
    grid-template-columns: repeat(2, 2.25rem);
  }

  .planning-view-toggle__button {
    width: 2.25rem;
  }

  .planning-week-navigation {
    margin-bottom: 0.58rem;
  }

  #planning-card-board[data-view="weeks"] .planning-week-grid {
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
    min-width: 58.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="planning"]::before,
  body[data-page="planning"]::after {
    animation: none;
    will-change: auto;
  }

  .planning-view-toggle__button,
  .planning-week-navigation__button {
    transition: none;
  }

  #planning-card-board[data-view="weeks"] .plan-card:hover,
  #planning-card-board[data-view="weeks"] .plan-card:focus-within,
  #planning-card-board[data-view="weeks"] .plan-card.is-selected {
    transform: none;
  }
}

/* Compact card workspace -------------------------------------------------- */

html,
body[data-page="planning"] {
  max-width: 100%;
  overflow-x: hidden;
}

.planning-site-shell .site-header {
  min-height: 4.1rem;
  padding: 0.55rem clamp(0.75rem, 1.4vw, 1.5rem);
}

.planning-site-shell .brand {
  gap: 0.62rem;
}

.planning-site-shell .brand-mark {
  width: 2.55rem;
}

.planning-site-shell .brand-copy {
  gap: 0.08rem;
}

.planning-site-shell .brand-copy strong {
  font-size: 1rem;
}

.planning-site-shell .brand-copy > span {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
}

.planning-site-shell .site-nav {
  padding: 0.2rem;
}

.planning-site-shell .site-nav a {
  padding: 0.5rem 0.72rem;
  font-size: 0.76rem;
}

.planning-site-shell .planning-gateway {
  flex-basis: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.planning-site-shell .planning-gateway img {
  width: 1.72rem;
  height: 1.72rem;
}

.planning-main {
  min-width: 0;
  min-height: 100svh;
  padding-top: 4.1rem;
}

.planning-app {
  min-width: 0;
  padding: clamp(0.5rem, 0.9vw, 0.85rem) clamp(0.5rem, 1vw, 0.95rem) 1.25rem;
}

.planning-loading,
.planning-error {
  min-height: calc(100svh - 5.5rem);
}

.planning-loading {
  gap: 0.4rem;
}

.planning-content {
  gap: clamp(0.6rem, 0.85vw, 0.8rem);
}

.planning-toolbar {
  top: 4.15rem;
  gap: 0.5rem;
  padding: 0.55rem;
  border-radius: 15px;
  background: rgba(10, 12, 13, 0.93);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px) saturate(1.08);
}

.planning-toolbar__primary {
  align-items: center;
  gap: 0.65rem;
}

.planning-toolbar__identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.discipline-filters {
  gap: 0.28rem;
  min-width: 0;
  padding: 0.05rem 0 0.08rem;
}

.discipline-chip {
  min-height: 1.95rem;
  padding: 0.38rem 0.58rem 0.38rem 1.2rem;
  font-size: 0.62rem;
}

.discipline-chip::before {
  left: 0.56rem;
  width: 0.32rem;
  height: 0.32rem;
}

.planning-toolbar__actions {
  gap: 0.32rem;
}

.compact-action {
  min-height: 2.1rem;
  padding: 0.42rem 0.6rem;
  border-radius: 10px;
  font-size: 0.62rem;
}

.compact-action__icon {
  width: 0.88rem;
  height: 0.88rem;
}

.planning-toolbar__secondary {
  grid-template-columns: minmax(13rem, 1.4fr) repeat(5, minmax(7rem, 0.5fr)) auto;
  gap: 0.35rem;
}

.planning-search input,
.planning-select select {
  min-height: 2.2rem;
  border-radius: 9px;
  font-size: 0.67rem;
}

.planning-search input {
  padding: 0.48rem 0.58rem 0.48rem 2rem;
}

.planning-search svg {
  left: 0.62rem;
  width: 0.88rem;
  height: 0.88rem;
}

.planning-select {
  display: block;
}

.planning-select select {
  padding: 0.45rem 1.45rem 0.45rem 0.55rem;
}

.clear-filters {
  min-height: 2.2rem;
  padding: 0.4rem 0.58rem;
  border-radius: 9px;
  font-size: 0.62rem;
}

.active-filter-row {
  min-height: 1.1rem;
  padding-top: 0.4rem;
}

.active-filter-row p {
  font-size: 0.62rem;
}

.active-filter-token {
  min-height: 1.35rem;
  padding: 0.18rem 0.4rem;
  font-size: 0.57rem;
}

.roadmap-shell,
.card-grid-shell {
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.roadmap-scroll {
  width: 100%;
  max-height: none;
  overflow: visible;
  scroll-snap-type: none;
}

.roadmap-canvas {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.planning-card-board {
  display: block;
  width: 100%;
}

.planning-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 23.5rem), 1fr));
  gap: clamp(0.75rem, 1vw, 1.05rem);
  align-items: stretch;
  width: 100%;
}

.week-column,
.week-card-stack {
  display: contents;
}

.week-column::before,
.week-header,
.week-empty {
  display: none;
}

.plan-card {
  min-width: 0;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left-width: 3px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 5%, transparent), transparent 42%),
    #151819;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.plan-card:hover,
.plan-card:focus-within,
.plan-card.is-selected {
  transform: translateY(-3px);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--discipline-accent) 9%, transparent);
}

.plan-card__open {
  flex: 1 1 auto;
  padding: 1.15rem 1.15rem 0.85rem;
}

.plan-card__id {
  font-size: 0.66rem;
}

.card-state,
.card-scope {
  min-height: 1.55rem;
  padding: 0.24rem 0.5rem;
  font-size: 0.58rem;
}

.plan-card h4 {
  margin-top: 0.8rem;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);
  line-height: 1.28;
  letter-spacing: -0.018em;
}

.plan-card__summary {
  margin-top: 0.62rem;
  color: #99a2a7;
  font-size: 0.8rem;
  line-height: 1.58;
  -webkit-line-clamp: 4;
}

.plan-card__meta {
  margin-top: 0.85rem;
  color: #899298;
  font-size: 0.67rem;
}

.plan-card__estimate {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(235, 241, 244, 0.13);
  border-radius: 999px;
  background: rgba(235, 241, 244, 0.055);
  color: #e3e8eb;
  font-size: 0.7rem;
  font-weight: 800;
}

.plan-card__estimate > span {
  margin-right: 0.18rem;
  color: #9fa8ad;
}

.plan-card__tags {
  gap: 0.36rem;
  margin-top: 0;
  padding: 0 1.15rem;
}

.plan-tag,
.tag-button {
  min-height: 1.55rem;
  padding: 0.24rem 0.48rem;
  font-size: 0.61rem;
}

.plan-card__bottom {
  margin-top: 0.85rem;
  padding: 0.78rem 1.15rem 0.95rem;
}

.plan-card__discipline,
.dependency-count {
  font-size: 0.63rem;
}

.dependency-layer {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .planning-toolbar {
    position: sticky;
  }

  .planning-toolbar__primary {
    align-items: center;
    flex-direction: row;
  }

  .planning-toolbar__secondary {
    grid-template-columns: minmax(13rem, 1fr) repeat(3, minmax(7rem, 0.45fr));
  }

  .planning-toolbar__secondary .planning-select:nth-of-type(4),
  .planning-toolbar__secondary .planning-select:nth-of-type(5) {
    grid-row: auto;
  }
}

@media (max-width: 840px) {
  .planning-site-shell .site-header {
    align-items: center;
    flex-direction: row;
    gap: 0.55rem;
    padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.55rem 0.45rem;
  }

  .planning-site-shell .brand-mark {
    width: 2.2rem;
  }

  .planning-site-shell .brand-copy strong {
    font-size: 0.82rem;
  }

  .planning-site-shell .brand-copy > span {
    display: none;
  }

  .planning-site-shell .site-header__actions {
    display: flex;
    width: auto;
    margin-left: auto;
  }

  .planning-site-shell .site-nav {
    width: auto;
  }

  .planning-site-shell .site-nav a {
    padding: 0.44rem 0.5rem;
    font-size: 0.66rem;
  }

  .planning-site-shell .planning-gateway {
    flex-basis: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
  }

  .planning-main {
    padding-top: calc(3.25rem + env(safe-area-inset-top, 0px));
  }

  .planning-toolbar {
    top: calc(3.25rem + env(safe-area-inset-top, 0px));
  }

  .planning-toolbar__primary {
    align-items: stretch;
    flex-direction: column;
  }

  .planning-toolbar__identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .discipline-filters {
    width: 100%;
  }

  .planning-toolbar__actions {
    align-self: stretch;
    justify-content: flex-end;
  }

  .planning-toolbar__secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .planning-search {
    grid-column: 1 / -1;
  }

  .planning-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }
}

@media (max-width: 540px) {
  .planning-site-shell,
  .planning-main,
  .planning-app,
  .planning-content,
  .planning-toolbar,
  .card-grid-shell,
  .roadmap-scroll,
  .roadmap-canvas,
  .planning-card-board,
  .planning-card-grid,
  .plan-card,
  .plan-card__open {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .planning-site-shell .brand-copy {
    display: none;
  }

  .planning-site-shell .site-header__actions {
    min-width: 0;
    gap: 0.35rem;
  }

  .planning-site-shell .site-nav a:first-child {
    display: none;
  }

  .planning-site-shell .site-nav a {
    padding-inline: clamp(0.34rem, 2.5vw, 0.52rem);
    font-size: 0.63rem;
  }

  .planning-app {
    padding-inline: 0.42rem;
  }

  .planning-toolbar {
    position: static;
  }

  .planning-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-action {
    min-width: 0;
    overflow: hidden;
  }

  .compact-action > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .planning-toolbar__secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-search {
    grid-column: 1 / -1;
  }

  .clear-filters {
    min-height: 2.2rem;
  }

  .active-filter-row {
    gap: 0.4rem;
  }

  .plan-card {
    min-height: 16rem;
  }

  .plan-card__open {
    padding: 1rem 1rem 0.75rem;
    overflow: hidden;
  }

  .plan-card h4,
  .plan-card__summary {
    overflow-wrap: anywhere;
  }

  .plan-card__tags {
    padding-inline: 1rem;
  }

  .plan-card__bottom {
    padding-inline: 1rem;
  }
}

@media (max-width: 360px) {
  .planning-site-shell .site-nav a {
    padding-inline: 0.28rem;
    font-size: 0.59rem;
  }

  .planning-site-shell .planning-gateway {
    flex-basis: 2.1rem;
    width: 2.1rem;
    height: 2.1rem;
  }
}

/* Final workspace geometry and content hardening. */

:root {
  --planning-header-height: 4.1rem;
}

html,
body[data-page="planning"] {
  overflow-x: hidden;
  overflow-x: clip;
}

.planning-site-shell .site-header {
  width: 100%;
  max-width: 100vw;
  height: var(--planning-header-height);
  min-height: var(--planning-header-height);
}

.planning-site-shell .brand-mark {
  width: auto;
  height: 2.65rem;
  max-height: 2.65rem;
}

.planning-main {
  padding-top: var(--planning-header-height);
}

.planning-toolbar {
  top: var(--planning-header-height);
}

.dependency-layer {
  z-index: 1;
}

.planning-card-board {
  z-index: 2;
}

.plan-card {
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.plan-card__open,
.plan-card__top,
.plan-card__meta,
.plan-card__tags,
.plan-card__bottom {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.plan-card__open {
  overflow: hidden;
}

.plan-card__top {
  align-items: flex-start;
}

.plan-card__id {
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card__estimate {
  flex: 0 1 auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card h4,
.plan-card__summary,
.plan-card__meta span,
.plan-card__discipline {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.plan-card__meta {
  align-items: flex-start;
  flex-wrap: wrap;
}

.plan-card__meta span {
  white-space: normal;
}

.plan-card__meta .card-state,
.plan-card__meta span:last-child {
  flex: none;
  white-space: nowrap;
}

.plan-card__tags {
  overflow: hidden;
}

.plan-card__tags > *,
.tag-button,
.plan-tag {
  min-width: 0;
  max-width: 100%;
}

.tag-button,
.plan-tag {
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card__bottom {
  align-items: flex-start;
  flex-wrap: wrap;
}

.plan-card__discipline {
  flex: 1 1 8rem;
  white-space: normal;
}

.dependency-count,
.card-scope {
  flex: none;
}

.discipline-chip {
  max-width: min(18rem, 82vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-filter-token {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.active-filter-token button {
  flex: none;
}

@media (max-width: 900px) {
  .planning-toolbar {
    position: static;
    top: auto;
  }
}

@media (max-width: 840px) {
  :root {
    --planning-header-height: calc(3.25rem + env(safe-area-inset-top, 0px));
  }

  .planning-site-shell .brand-mark {
    width: auto;
    height: 2.15rem;
    max-height: 2.15rem;
  }
}

/* Readable card workspace ------------------------------------------------- */

body[data-page="planning"] {
  --text: #dde1e3;
  --muted: #a5adb1;
  background:
    radial-gradient(circle at 76% -8%, rgba(183, 193, 198, 0.09), transparent 34rem),
    radial-gradient(circle at 4% 22%, rgba(122, 137, 142, 0.08), transparent 31rem),
    #1a1d1f;
}

body[data-page="planning"]::before {
  opacity: 0.16;
}

body[data-page="planning"] > .planning-site-shell .arcane-spinner::before {
  background: #1a1d1f;
}

.planning-site-shell .site-header {
  background: rgba(27, 30, 32, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.planning-toolbar {
  border-color: rgba(255, 255, 255, 0.085);
  background: rgba(34, 38, 40, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.planning-toolbar__identity {
  flex: 1 1 auto;
}

.card-density {
  display: grid;
  grid-template-columns: auto minmax(5.5rem, 8.5rem) auto;
  gap: 0.55rem;
  align-items: center;
  flex: none;
  min-height: 2rem;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.card-density label {
  display: grid;
  place-items: center;
  color: #aeb6ba;
}

.card-density svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.card-density input[type="range"] {
  width: 100%;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.card-density input[type="range"]::-webkit-slider-runnable-track {
  height: 0.18rem;
  border-radius: 999px;
  background: rgba(225, 231, 234, 0.22);
}

.card-density input[type="range"]::-webkit-slider-thumb {
  width: 0.86rem;
  height: 0.86rem;
  margin-top: -0.34rem;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: #d9dfe2;
  box-shadow: 0 0 0.6rem rgba(240, 246, 248, 0.26);
}

.card-density input[type="range"]::-moz-range-track {
  height: 0.18rem;
  border: 0;
  border-radius: 999px;
  background: rgba(225, 231, 234, 0.22);
}

.card-density input[type="range"]::-moz-range-thumb {
  width: 0.82rem;
  height: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: #d9dfe2;
  box-shadow: 0 0 0.6rem rgba(240, 246, 248, 0.26);
}

.card-density input[type="range"]:focus-visible {
  outline: 2px solid rgba(224, 232, 235, 0.42);
  outline-offset: 0.22rem;
  border-radius: 999px;
}

.card-density output {
  min-width: 4.4rem;
  color: #b8c0c4;
  font-size: 0.72rem;
  font-weight: 750;
  text-align: right;
  white-space: nowrap;
}

.discipline-chip,
.compact-action,
.clear-filters {
  font-size: 0.72rem;
}

.planning-search input,
.planning-select select {
  font-size: 0.75rem;
}

.active-filter-row p {
  font-size: 0.7rem;
}

.active-filter-token {
  font-size: 0.68rem;
}

.planning-search input,
.planning-select select {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(23, 26, 28, 0.7);
}

.planning-card-grid {
  grid-template-columns: repeat(var(--cards-per-row, var(--grid-columns, 3)), minmax(0, 1fr));
  gap: clamp(0.8rem, 1.05vw, 1.15rem);
}

.plan-card {
  min-height: clamp(12rem, 15vw, 15rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left-width: 1px;
  border-radius: 17px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 3%, transparent), transparent 52%),
    #292d2f;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.17);
}

.plan-card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 4px;
  background: var(--discipline-accent);
  opacity: 0.8;
  pointer-events: none;
}

.plan-card:hover,
.plan-card:focus-within,
.plan-card.is-selected {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--discipline-accent) 24%, rgba(255, 255, 255, 0.09));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 5%, transparent), transparent 55%),
    #2d3133;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.23),
    0 0 0 1px color-mix(in srgb, var(--discipline-accent) 7%, transparent);
}

.plan-card__open {
  display: flex;
  align-items: flex-start;
  min-height: inherit;
  padding: clamp(1.25rem, 2vw, 1.8rem);
}

.plan-card h4 {
  margin: 0;
  color: #e0e4e6;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.45rem, 1.75vw, 1.85rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.028em;
}

/* Grid cards deliberately remain title-only. Every property lives in focus view. */
.plan-card__top,
.plan-card__id,
.plan-card__summary,
.plan-card__meta,
.plan-card__estimate,
.plan-card__tags,
.plan-card__bottom,
.plan-card__checklist,
.card-checklist,
.plan-card__save-state {
  display: none;
}

.planning-content[data-card-density="1"] .plan-card,
.planning-card-board[data-card-density="1"] .plan-card,
.planning-card-board[data-columns="1"] .plan-card {
  min-height: clamp(17rem, 24vw, 23rem);
}

.planning-content[data-card-density="1"] .plan-card h4,
.planning-card-board[data-card-density="1"] .plan-card h4,
.planning-card-board[data-columns="1"] .plan-card h4 {
  max-width: 27ch;
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.planning-content[data-card-density="2"] .plan-card,
.planning-card-board[data-card-density="2"] .plan-card,
.planning-card-board[data-columns="2"] .plan-card {
  min-height: clamp(15rem, 20vw, 19rem);
}

.planning-content[data-card-density="2"] .plan-card h4,
.planning-card-board[data-card-density="2"] .plan-card h4,
.planning-card-board[data-columns="2"] .plan-card h4 {
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
}

.planning-content[data-card-density="4"] .plan-card,
.planning-card-board[data-card-density="4"] .plan-card,
.planning-card-board[data-columns="4"] .plan-card {
  min-height: clamp(10.5rem, 13vw, 13rem);
}

.planning-content[data-card-density="4"] .plan-card h4,
.planning-card-board[data-card-density="4"] .plan-card h4,
.planning-card-board[data-columns="4"] .plan-card h4 {
  font-size: clamp(1.25rem, 1.45vw, 1.55rem);
}

.planning-content[data-card-density="5"] .plan-card,
.planning-card-board[data-card-density="5"] .plan-card,
.planning-card-board[data-columns="5"] .plan-card {
  min-height: clamp(9.5rem, 11vw, 11.5rem);
}

.planning-content[data-card-density="5"] .plan-card h4,
.planning-card-board[data-card-density="5"] .plan-card h4,
.planning-card-board[data-columns="5"] .plan-card h4 {
  font-size: clamp(1.25rem, 1.4vw, 1.5rem);
}

.plan-card.is-saving::after {
  inset: 0.85rem 0.85rem auto auto;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 24%, rgba(255, 255, 255, 0.86) 78%, transparent 100%);
  box-shadow: none;
  filter: drop-shadow(0 0 0.42rem rgba(255, 255, 255, 0.34));
  backdrop-filter: none;
  animation: arcane-spin 720ms linear infinite;
}

/* The former side drawer is a centered, generous focus surface. */
.drawer-backdrop {
  background: rgba(16, 18, 19, 0.66);
  backdrop-filter: blur(12px) saturate(0.85);
}

.card-drawer {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(72rem, calc(100vw - 3rem));
  height: min(56rem, calc(100svh - 3rem));
  max-height: calc(100svh - 3rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 0, rgba(183, 195, 201, 0.075), transparent 28rem),
    #24282a;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -47%) scale(0.975);
  transition:
    opacity 190ms ease,
    transform 230ms cubic-bezier(0.22, 0.7, 0.24, 1);
}

.card-drawer.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.card-drawer__chrome {
  min-height: 4.8rem;
  padding: 0.95rem clamp(1.25rem, 2.4vw, 2rem);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 34, 36, 0.8);
}

.card-drawer__chrome p {
  color: #afb6ba;
  font-size: 0.9rem;
}

.card-drawer__chrome button {
  min-height: 2.65rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: #c6cccf;
  font-size: 0.95rem;
}

.card-drawer__body {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.card-detail,
.planning-card-form {
  gap: clamp(1.2rem, 2vw, 1.8rem);
}

.card-detail__head {
  gap: 0.95rem;
}

.card-detail__head h2,
.planning-card-form h2 {
  max-width: 24ch;
  color: #e4e7e9;
  font-size: clamp(2.2rem, 4vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.card-detail__id {
  color: #a0a8ac;
  font-size: 0.9rem;
}

.card-detail__pills,
.card-detail__tags,
.card-detail__actions {
  gap: 0.6rem;
}

.card-detail__estimate {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  width: fit-content;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.card-detail__estimate > span {
  color: #a5adb1;
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-detail__estimate strong {
  color: #e0e5e7;
  font-size: 1.3rem;
}

.detail-pill,
.relation-kind,
.plan-tag,
.tag-button {
  min-height: 2rem;
  padding: 0.38rem 0.68rem;
  color: #c0c6c9;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
}

.card-detail__section {
  padding-top: 1.35rem;
  border-top-color: rgba(255, 255, 255, 0.085);
}

.card-detail__section h3 {
  margin-bottom: 0.75rem;
  color: #c0c7ca;
  font-size: 0.95rem;
}

.card-detail__section p {
  max-width: 72ch;
  color: #c1c7ca;
  font-size: clamp(1.1rem, 1.3vw, 1.22rem);
  line-height: 1.72;
}

.acceptance-list {
  gap: 0.7rem;
}

.acceptance-list li {
  padding-left: 0;
  color: #c5cbce;
  font-size: clamp(1.08rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.acceptance-list li::before {
  display: none;
}

.acceptance-check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
}

.acceptance-check__control,
.criterion-checkbox,
.plan-card__criterion-control,
.card-checklist input[type="checkbox"] {
  flex: 0 0 1.3rem;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.12rem 0 0;
  padding: 0;
  appearance: none;
  border: 1px solid rgba(225, 232, 235, 0.35);
  border-radius: 0.3rem;
  outline: none;
  background-color: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.acceptance-check__control:checked,
.criterion-checkbox:checked,
.plan-card__criterion-control:checked,
.card-checklist input[type="checkbox"]:checked {
  border-color: #c8d0d3;
  background-color: #c8d0d3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23252a2c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.2 8.1 3 3 6.6-6.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.95rem;
  box-shadow: 0 0 0.65rem rgba(232, 238, 240, 0.18);
}

.acceptance-check__control:focus-visible,
.criterion-checkbox:focus-visible,
.plan-card__criterion-control:focus-visible,
.card-checklist input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(226, 234, 237, 0.48);
  outline-offset: 0.2rem;
}

.acceptance-check__control:disabled,
.criterion-checkbox:disabled,
.plan-card__criterion-control:disabled,
.card-checklist input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.acceptance-check:has(.acceptance-check__control:disabled) {
  cursor: not-allowed;
}

.card-detail.is-saving .acceptance-check,
.card-detail.is-saving .acceptance-check__control:disabled {
  cursor: wait;
}

.acceptance-check__text {
  flex: 1 1 auto;
}

.acceptance-check:has(input:checked) .acceptance-check__text {
  color: #8e989c;
  text-decoration: line-through;
  text-decoration-color: rgba(174, 184, 188, 0.6);
}

.card-detail__save-state {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
  margin-top: 0.8rem;
  color: #bfc6c9;
  font-size: 0.9rem;
}

.card-detail__save-state[hidden] {
  display: none;
}

.acceptance-list__unlock {
  margin-top: 0.9rem;
}

.criterion-spinner,
.plan-card__check-state[aria-busy="true"]::before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  border-top-color: rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  filter: drop-shadow(0 0 0.38rem rgba(255, 255, 255, 0.28));
  animation: arcane-spin 720ms linear infinite;
}

.plan-card__check-state[aria-busy="true"]::before {
  content: "";
}

.card-drawer .arcane-spinner::before {
  background: #24282a;
}

.relation-list {
  gap: 0.6rem;
}

.relation-card {
  min-height: 3.5rem;
  padding: 0.8rem 0.9rem;
  border-color: rgba(255, 255, 255, 0.085);
  background: rgba(255, 255, 255, 0.03);
}

.relation-card strong {
  font-size: 1rem;
}

.relation-card > span:last-child {
  font-size: 0.88rem;
}

.card-action {
  min-height: 3rem;
  padding: 0.72rem 1rem;
  font-size: 0.95rem;
}

.planning-form-grid {
  gap: 0.9rem;
}

.planning-form-field > span,
.planning-form-field legend {
  color: #aab2b6;
  font-size: 0.9rem;
}

.planning-form-field input,
.planning-form-field select,
.planning-form-field textarea {
  min-height: 3.15rem;
  padding: 0.78rem 0.85rem;
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(20, 23, 25, 0.72);
  font-size: 1rem;
}

.planning-form-field textarea {
  min-height: 8rem;
}

.planning-checkbox {
  min-height: 3.15rem;
  color: #bec5c8;
  font-size: 0.98rem;
}

.relation-editor small,
.relation-editor__chip {
  font-size: 0.9rem;
}

.form-actions {
  bottom: -2.75rem;
  margin: 0 -2.75rem -2.75rem;
  padding: 1rem 2.75rem 1.2rem;
  background: rgba(32, 36, 38, 0.96);
}

@media (max-width: 1120px) {
  .planning-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #planning-card-board[data-columns="1"] .planning-card-grid {
    grid-template-columns: 1fr;
  }

  #planning-card-board[data-columns="2"] .planning-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-density {
    grid-template-columns: auto minmax(5rem, 7rem) auto;
  }
}

@media (max-width: 840px) {
  .planning-toolbar__identity {
    align-items: stretch;
  }

  .card-density {
    width: min(100%, 17rem);
  }

  .planning-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #planning-card-board[data-columns="1"] .planning-card-grid {
    grid-template-columns: 1fr;
  }

  .card-drawer {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: calc(100vw - 1.2rem);
    height: calc(100svh - 1.2rem);
    max-height: calc(100svh - 1.2rem);
    border-radius: 20px;
    transform: translate(-50%, -47%) scale(0.975);
  }

  .card-drawer.is-open {
    transform: translate(-50%, -50%) scale(1);
  }

  .card-detail__head h2,
  .planning-card-form h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

@media (max-width: 620px) {
  .planning-card-grid {
    grid-template-columns: 1fr;
  }

  .plan-card,
  .planning-content[data-card-density] .plan-card,
  .planning-card-board[data-card-density] .plan-card,
  .planning-card-board[data-columns] .plan-card {
    min-height: 10.5rem;
  }

  .plan-card h4,
  .planning-content[data-card-density] .plan-card h4,
  .planning-card-board[data-card-density] .plan-card h4,
  .planning-card-board[data-columns] .plan-card h4 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .card-density {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
  }

  .card-drawer__chrome {
    min-height: 4rem;
    padding: 0.65rem 0.9rem;
  }

  .card-drawer__body {
    padding: 1.1rem;
  }

  .card-detail__section p,
  .acceptance-list li {
    font-size: 1rem;
  }

  .form-actions {
    bottom: -1.1rem;
    margin: 0 -1.1rem -1.1rem;
    padding: 0.9rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Crisp glass controls and high-density card polish ---------------------- */

.planning-toolbar {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 42%),
    rgba(24, 27, 29, 0.88);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  backdrop-filter: blur(24px) saturate(1.16);
}

.planning-toolbar__secondary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding-inline: 4.25rem;
}

.planning-filter-controls {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-width: 0;
  max-width: 100%;
}

.planning-search,
.planning-select {
  position: relative;
  height: 2.35rem;
}

.planning-search {
  flex: 0 0 2.35rem;
  width: 2.35rem;
  transition:
    flex-basis 240ms cubic-bezier(0.22, 0.75, 0.2, 1),
    width 240ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.planning-search:focus-within {
  flex-basis: clamp(9.5rem, 16vw, 13rem);
  width: clamp(9.5rem, 16vw, 13rem);
}

.planning-search input,
.planning-select__trigger {
  height: 2.35rem;
  min-height: 2.35rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-color: rgba(255, 255, 255, 0.105);
  border-radius: 11px;
  color-scheme: dark;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(10, 12, 13, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 7px 18px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.planning-search input:hover,
.planning-select__trigger:hover {
  border-color: rgba(255, 255, 255, 0.19);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(13, 15, 16, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 9px 22px rgba(0, 0, 0, 0.19);
}

.planning-search input:focus-visible,
.planning-select__trigger:focus-visible {
  outline: 2px solid rgba(235, 241, 244, 0.32);
  outline-offset: 2px;
}

.planning-search input {
  padding: 0;
  color: transparent;
  caret-color: transparent;
  cursor: text;
}

.planning-search input::placeholder {
  color: transparent;
}

.planning-search svg {
  z-index: 2;
  left: 50%;
  width: 1rem;
  height: 1rem;
  stroke: #aab2b6;
  stroke-width: 1.65;
  transform: translate(-50%, -50%);
  transition:
    left 240ms cubic-bezier(0.22, 0.75, 0.2, 1),
    color 160ms ease,
    filter 160ms ease,
    transform 240ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.planning-search:hover svg,
.planning-search:focus-within svg {
  stroke: #f0f4f5;
  filter: drop-shadow(0 0 0.35rem rgba(255, 255, 255, 0.28));
}

.planning-search:focus-within input {
  padding: 0.5rem 1.8rem 0.5rem 2.15rem;
  color: #edf1f2;
  caret-color: #edf1f2;
}

.planning-search:focus-within svg {
  left: 0.7rem;
  transform: translate(0, -50%);
}

.planning-select {
  display: block;
  flex: 0 0 2.85rem;
  width: 2.85rem;
  min-width: 2.85rem;
}

.planning-select__trigger {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.planning-select__native[hidden] {
  display: none;
}

.planning-select::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0.38rem;
  width: 0.64rem;
  height: 0.64rem;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23bfc6c9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E");
  opacity: 0.72;
  transform: translateY(-50%);
  transition:
    opacity 160ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.planning-select__icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.58rem;
  display: grid;
  place-items: center;
  width: 0.92rem;
  height: 0.92rem;
  color: #969fa4;
  transform: translateY(-50%);
  transition:
    color 160ms ease,
    filter 160ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.planning-select__icon svg,
svg.planning-select__icon {
  width: 0.92rem;
  height: 0.92rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.planning-select:hover .planning-select__icon,
.planning-select:focus-within .planning-select__icon {
  color: #eef2f3;
  filter: drop-shadow(0 0 0.32rem rgba(255, 255, 255, 0.25));
  transform: translateY(-50%) scale(1.06);
}

.planning-select:hover::after,
.planning-select:focus-within::after,
.planning-select.is-open::after {
  opacity: 1;
  transform: translateY(-42%);
}

.planning-select.is-open::after {
  transform: translateY(-48%) rotate(180deg);
}

.planning-select[data-active="true"] .planning-select__trigger,
.planning-select.is-open .planning-select__trigger {
  border-color: rgba(238, 244, 246, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
    rgba(17, 20, 21, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 1rem rgba(246, 250, 251, 0.07),
    0 9px 22px rgba(0, 0, 0, 0.22);
}

.planning-select[data-active="true"] .planning-select__icon,
.planning-select.is-open .planning-select__icon {
  color: #f4f7f8;
  filter: drop-shadow(0 0 0.4rem rgba(255, 255, 255, 0.3));
}

.planning-select__menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.5rem);
  left: 0;
  width: max-content;
  min-width: 13.5rem;
  max-width: min(19rem, calc(100vw - 2rem));
  max-height: min(23rem, calc(100svh - 10rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% -12%, rgba(255, 255, 255, 0.105), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 48%),
    rgba(17, 20, 22, 0.965);
  box-shadow:
    0 26px 65px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 1.4rem rgba(238, 244, 246, 0.045);
  -webkit-backdrop-filter: blur(30px) saturate(1.22);
  backdrop-filter: blur(30px) saturate(1.22);
  transform-origin: top left;
  animation: planning-filter-menu-in 180ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

.planning-select__menu[hidden] {
  display: none;
}

.planning-select--owner .planning-select__menu {
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
}

.planning-select--priority .planning-select__menu,
.planning-select--tag .planning-select__menu {
  right: 0;
  left: auto;
  transform-origin: top right;
}

.planning-select__option {
  position: relative;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.5rem 0.66rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #bdc5c8;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 520;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.planning-select__option::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 transparent;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.planning-select__option:hover,
.planning-select__option:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.095);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  color: #f1f4f5;
  transform: translateX(2px);
}

.planning-select__option[aria-selected="true"] {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
  color: #ffffff;
}

.planning-select__option[aria-selected="true"]::before {
  border-color: rgba(255, 255, 255, 0.78);
  background: #eef3f4;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.045),
    0 0 0.6rem rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.planning-select__menu {
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

.planning-select__menu:hover,
.planning-select__menu:focus-within {
  scrollbar-color: rgba(230, 236, 239, 0.44) rgba(255, 255, 255, 0.02);
}

.planning-select__menu::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.planning-select__menu::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
}

.planning-select__menu::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}

.planning-select__menu:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(171, 183, 188, 0.32)) padding-box;
  box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.1);
}

@keyframes planning-filter-menu-in {
  from {
    opacity: 0;
    translate: 0 -0.3rem;
    scale: 0.975;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.planning-select option,
.planning-form-field option {
  color: #e8ecee;
  background: #111416;
}

.planning-select option {
  font-size: 0.8rem;
}

.planning-select option:checked {
  color: #ffffff;
  background: #24292c;
}

.card-density {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 14, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 7px 18px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.card-density input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(235, 241, 243, 0.42), rgba(235, 241, 243, 0.13));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

.card-density input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, rgba(235, 241, 243, 0.42), rgba(235, 241, 243, 0.13));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

.card-density input[type="range"]::-webkit-slider-thumb {
  background: linear-gradient(145deg, #ffffff, #c7ced1);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.045),
    0 0 0.72rem rgba(245, 249, 250, 0.32),
    0 4px 9px rgba(0, 0, 0, 0.35);
}

.card-density input[type="range"]::-moz-range-thumb {
  background: linear-gradient(145deg, #ffffff, #c7ced1);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.045),
    0 0 0.72rem rgba(245, 249, 250, 0.32),
    0 4px 9px rgba(0, 0, 0, 0.35);
}

.plan-card {
  isolation: isolate;
  border-radius: 13px;
  background:
    radial-gradient(circle at 14% -24%, rgba(255, 255, 255, 0.065), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 4%, transparent), transparent 54%),
    #292d2f;
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transform-origin: 50% 72%;
  transition:
    transform 280ms cubic-bezier(0.18, 0.78, 0.2, 1),
    border-color 210ms ease,
    background 240ms ease,
    box-shadow 280ms ease,
    opacity 150ms ease;
}

.plan-card::before {
  height: 3px;
  opacity: 0.72;
  box-shadow: 0 -4px 13px color-mix(in srgb, var(--discipline-accent) 12%, transparent);
  transition:
    height 220ms ease,
    opacity 220ms ease,
    box-shadow 220ms ease;
}

.plan-card__open {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.plan-card__open::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.12), transparent 38%),
    linear-gradient(112deg, transparent 22%, rgba(255, 255, 255, 0.055) 49%, transparent 72%);
  opacity: 0;
  transform: translate3d(-5%, 4%, 0) scale(1.035);
  transition:
    opacity 240ms ease,
    transform 440ms cubic-bezier(0.18, 0.78, 0.2, 1);
  pointer-events: none;
}

.plan-card h4 {
  position: relative;
  z-index: 1;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  text-wrap: balance;
}

.plan-card:hover,
.plan-card:focus-within,
.plan-card.is-selected {
  z-index: 8;
  transform: translateY(-6px) scale(1.012);
  border-color: color-mix(in srgb, var(--discipline-accent) 31%, rgba(255, 255, 255, 0.17));
  background:
    radial-gradient(circle at 14% -24%, rgba(255, 255, 255, 0.105), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 7%, transparent), transparent 58%),
    #303436;
  box-shadow:
    0 28px 54px -19px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 24px rgba(255, 255, 255, 0.06),
    0 0 35px color-mix(in srgb, var(--discipline-accent) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.plan-card:hover::before,
.plan-card:focus-within::before,
.plan-card.is-selected::before {
  height: 4px;
  opacity: 1;
  box-shadow: 0 -5px 18px color-mix(in srgb, var(--discipline-accent) 22%, transparent);
}

.plan-card:hover .plan-card__open::after,
.plan-card:focus-within .plan-card__open::after,
.plan-card.is-selected .plan-card__open::after {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.plan-card__open:focus-visible {
  outline: 2px solid rgba(244, 248, 249, 0.58);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .plan-card:hover {
    transform: translateY(-8px) scale(1.018);
  }
}

#planning-card-board[data-columns="3"] .plan-card {
  min-height: clamp(13rem, 17vw, 17rem);
}

#planning-card-board[data-columns="4"] .plan-card {
  min-height: clamp(11.25rem, 14vw, 13.75rem);
}

#planning-card-board[data-columns="5"] .plan-card {
  min-height: clamp(10rem, 11.5vw, 12rem);
}

#planning-card-board[data-columns="6"] .plan-card {
  min-height: clamp(8.9rem, 9.5vw, 10.6rem);
}

#planning-card-board[data-columns="7"] .plan-card {
  min-height: clamp(8.25rem, 8.5vw, 9.7rem);
}

#planning-card-board[data-columns="8"] .plan-card {
  min-height: clamp(7.7rem, 7.8vw, 9rem);
}

#planning-card-board[data-columns="9"] .plan-card {
  min-height: clamp(7.25rem, 7.2vw, 8.5rem);
}

#planning-card-board:is([data-columns="6"], [data-columns="7"]) .plan-card__open {
  padding: clamp(0.78rem, 1.1vw, 1.05rem);
}

#planning-card-board:is([data-columns="8"], [data-columns="9"]) .plan-card__open {
  padding: clamp(0.66rem, 0.9vw, 0.88rem);
}

#planning-card-board[data-columns="6"] .plan-card h4 {
  font-size: clamp(0.98rem, 1.08vw, 1.18rem);
}

#planning-card-board[data-columns="7"] .plan-card h4 {
  font-size: clamp(0.91rem, 0.98vw, 1.08rem);
}

#planning-card-board[data-columns="8"] .plan-card h4 {
  font-size: clamp(0.84rem, 0.9vw, 1rem);
}

#planning-card-board[data-columns="9"] .plan-card h4 {
  font-size: clamp(0.79rem, 0.84vw, 0.94rem);
}

/* Stable scroll geometry with a quiet glass thumb that reveals on intent. */
html:has(body[data-page="planning"]),
body[data-page="planning"],
.discipline-filters,
.roadmap-scroll,
.card-drawer__body {
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  ):is(:hover, :focus-within) {
  scrollbar-color: rgba(224, 231, 234, 0.4) rgba(255, 255, 255, 0.025);
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  )::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  )::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  )::-webkit-scrollbar-thumb {
  min-height: 2.5rem;
  border: 3px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  ):is(:hover, :focus-within)::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.018);
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  ):is(:hover, :focus-within)::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(247, 250, 251, 0.5), rgba(176, 187, 192, 0.26)) padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0.55rem rgba(238, 244, 246, 0.08);
}

:where(
    html:has(body[data-page="planning"]),
    body[data-page="planning"],
    .discipline-filters,
    .roadmap-scroll,
    .card-drawer__body
  )::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(191, 201, 205, 0.42)) padding-box;
}

@media (max-width: 1180px) {
  .planning-toolbar__secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 0;
  }

  .planning-filter-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

}

@media (max-width: 1120px) {
  #planning-card-board:is(
      [data-columns="4"],
      [data-columns="5"],
      [data-columns="6"],
      [data-columns="7"],
      [data-columns="8"],
      [data-columns="9"]
    ) .plan-card {
    min-height: clamp(12rem, 17vw, 14rem);
  }

  #planning-card-board:is(
      [data-columns="4"],
      [data-columns="5"],
      [data-columns="6"],
      [data-columns="7"],
      [data-columns="8"],
      [data-columns="9"]
    ) .plan-card__open {
    padding: clamp(1rem, 2vw, 1.4rem);
  }

  #planning-card-board:is(
      [data-columns="4"],
      [data-columns="5"],
      [data-columns="6"],
      [data-columns="7"],
      [data-columns="8"],
      [data-columns="9"]
    ) .plan-card h4 {
    font-size: clamp(1.18rem, 1.8vw, 1.48rem);
  }
}

@media (max-width: 840px) {
  .planning-select {
    flex: 0 0 2.85rem;
    width: 2.85rem;
    min-width: 2.85rem;
    max-width: 2.85rem;
  }

  .planning-search:focus-within {
    flex-basis: min(11rem, 42vw);
    width: min(11rem, 42vw);
  }
}

@media (max-width: 620px) {
  .planning-toolbar__secondary {
    align-items: center;
  }

  .planning-filter-controls {
    gap: 0.32rem;
  }

  .planning-select {
    flex-basis: 2.85rem;
    min-width: 2.85rem;
  }

  #planning-card-board:is(
      [data-columns="3"],
      [data-columns="4"],
      [data-columns="5"],
      [data-columns="6"],
      [data-columns="7"],
      [data-columns="8"],
      [data-columns="9"]
    ) .plan-card {
    min-height: 10.5rem;
  }

  #planning-card-board:is(
      [data-columns="3"],
      [data-columns="4"],
      [data-columns="5"],
      [data-columns="6"],
      [data-columns="7"],
      [data-columns="8"],
      [data-columns="9"]
    ) .plan-card h4 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }
}

@media (hover: none), (pointer: coarse), (prefers-contrast: more) {
  html:has(body[data-page="planning"]),
  body[data-page="planning"],
  .discipline-filters,
  .roadmap-scroll,
  .card-drawer__body {
    scrollbar-color: rgba(224, 231, 234, 0.42) rgba(255, 255, 255, 0.025);
  }

  :where(
      html:has(body[data-page="planning"]),
      body[data-page="planning"],
      .discipline-filters,
      .roadmap-scroll,
      .card-drawer__body
    )::-webkit-scrollbar-thumb {
    background:
      linear-gradient(180deg, rgba(247, 250, 251, 0.52), rgba(176, 187, 192, 0.3)) padding-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning-search,
  .planning-search svg,
  .planning-select::after,
  .planning-select__icon,
  .planning-select__menu,
  .planning-select__option,
  .plan-card,
  .plan-card::before,
  .plan-card__open::after {
    transition: none;
  }

  .planning-select__menu {
    animation: none;
  }

  .plan-card:hover,
  .plan-card:focus-within,
  .plan-card.is-selected {
    transform: none;
  }
}

/* Week mode stays Trello-dense regardless of the all-cards density slider. */
body[data-page="planning"] {
  background:
    radial-gradient(ellipse at 72% 8%, rgba(123, 171, 139, 0.075), transparent 29rem),
    radial-gradient(ellipse at 9% 42%, rgba(85, 132, 103, 0.07), transparent 34rem),
    linear-gradient(180deg, #191d1b 0%, #151917 54%, #111412 100%);
}

body[data-page="planning"]::before {
  opacity: 0.48;
}

.planning-content[data-view="weeks"] .card-density {
  display: none;
}

.planning-content[data-view="weeks"] .roadmap-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.planning-content[data-view="weeks"] .dependency-layer {
  max-width: none;
}

#planning-card-board[data-view="weeks"] .week-column {
  scroll-snap-align: start;
}

#planning-card-board[data-view="weeks"] .week-header {
  position: static;
  top: auto;
  z-index: auto;
  min-height: 6.85rem;
  padding-block: 0.64rem 0.58rem;
}

#planning-card-board[data-view="weeks"] .week-header p {
  color: #a0aaa4;
  font-size: 0.72rem;
}

#planning-card-board[data-view="weeks"] .week-header__load {
  color: #9ba69f;
  font-size: 0.7rem;
}

#planning-card-board[data-view="weeks"] .plan-card,
#planning-card-board[data-view="weeks"][data-columns] .plan-card {
  align-self: start;
  width: 100%;
  min-height: 4.65rem;
  height: auto;
  border-radius: 11px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#planning-card-board[data-view="weeks"] .plan-card__open,
#planning-card-board[data-view="weeks"][data-columns] .plan-card__open {
  flex: 0 0 auto;
  width: 100%;
  min-height: 4.65rem;
  height: auto;
  padding: 0.86rem 0.88rem 1rem;
}

#planning-card-board[data-view="weeks"] .plan-card h4,
#planning-card-board[data-view="weeks"][data-columns] .plan-card h4 {
  margin: 0;
  font-size: clamp(0.84rem, 0.9vw, 0.96rem);
  font-weight: 500;
  line-height: 1.42;
}

@media (max-width: 1120px) {
  #planning-card-board[data-view="weeks"] .plan-card,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card,
  #planning-card-board[data-view="weeks"] .plan-card__open,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card__open {
    min-height: 4.65rem;
  }

  #planning-card-board[data-view="weeks"] .plan-card h4,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card h4 {
    font-size: clamp(0.84rem, 0.9vw, 0.96rem);
  }
}

@media (max-width: 620px) {
  body[data-page="planning"]::before {
    opacity: 0.34;
    filter: blur(42px) saturate(1.04);
  }

  body[data-page="planning"]::after {
    display: none;
  }

  #planning-card-board[data-view="weeks"] .plan-card,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card,
  #planning-card-board[data-view="weeks"] .plan-card__open,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card__open {
    min-height: 4.45rem;
  }

  #planning-card-board[data-view="weeks"] .plan-card h4,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card h4 {
    font-size: 0.86rem;
  }
}

/* Final cascade ownership for the interactive planning chrome. */
[data-tooltip] {
  position: relative;
}

.planning-toolbar {
  overflow: visible;
  gap: 0.72rem;
  padding: 0.78rem;
}

.planning-toolbar__identity {
  gap: 0.68rem;
}

.planning-view-toggle {
  grid-template-columns: repeat(2, 3rem);
  padding: 0.22rem;
  border-radius: 14px;
}

.planning-view-toggle__button {
  width: 3rem;
  height: 2.75rem;
  border-radius: 11px;
}

.planning-view-toggle__button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card-density {
  position: relative;
  grid-template-columns: auto minmax(6.4rem, 9rem) auto;
  min-height: 3rem;
  padding: 0.35rem 0.78rem 0.35rem 0.65rem;
  border-radius: 13px;
}

.card-density svg {
  width: 1.22rem;
  height: 1.22rem;
}

.card-density output {
  min-width: 4.8rem;
  font-size: 0.78rem;
}

.discipline-filters {
  gap: 0.42rem;
}

.discipline-chip {
  min-height: 2.7rem;
  padding: 0.55rem 0.82rem 0.55rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.035em;
}

.discipline-chip::before {
  left: 0.72rem;
  width: 0.4rem;
  height: 0.4rem;
}

.planning-toolbar__actions {
  align-items: center;
  gap: 0.5rem;
}

.compact-action,
.clear-filters {
  min-height: 2.85rem;
  padding: 0.58rem 0.82rem;
  border-radius: 12px;
  font-size: 0.75rem;
}

.compact-action__icon {
  width: 1.05rem;
  height: 1.05rem;
}

.planning-completion {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(3.8rem, 5.4rem) auto;
  gap: 0.52rem;
  align-items: center;
  min-height: 2.85rem;
  padding: 0.48rem 0.68rem;
  border: 1px solid rgba(149, 221, 166, 0.18);
  border-radius: 12px;
  outline: none;
  color: #cae6d1;
  background:
    radial-gradient(circle at 12% 115%, rgba(99, 211, 129, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(143, 220, 161, 0.045), rgba(143, 220, 161, 0.012)),
    rgba(11, 17, 13, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(221, 255, 229, 0.05),
    0 0 1.15rem rgba(100, 209, 128, 0.045),
    0 8px 20px rgba(0, 0, 0, 0.16);
}

.planning-completion:focus-visible {
  outline: 2px solid rgba(151, 229, 171, 0.55);
  outline-offset: 2px;
}

.planning-completion__label {
  color: #91aa98;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.planning-completion__track {
  position: relative;
  height: 0.42rem;
  overflow: hidden;
  border: 1px solid rgba(172, 228, 185, 0.08);
  border-radius: 999px;
  background: rgba(223, 248, 229, 0.055);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42);
}

.planning-completion__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4ea96b, #8bdd9f 72%, #c6f5d0);
  box-shadow:
    0 0 0.5rem rgba(110, 224, 139, 0.4),
    0 0 1rem rgba(110, 224, 139, 0.17);
  transition: width 560ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.planning-completion strong {
  min-width: 2.45rem;
  color: #baf2c7;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: right;
  text-shadow: 0 0 0.65rem rgba(116, 226, 143, 0.24);
}

.planning-toolbar__secondary {
  min-height: 3rem;
  padding-inline: 4.8rem;
}

.planning-filter-controls {
  gap: 0.5rem;
}

.planning-search,
.planning-select {
  height: 3rem;
}

.planning-search {
  flex: 0 0 3rem;
  width: 3rem;
}

.planning-search:focus-within {
  flex-basis: clamp(11rem, 18vw, 15rem);
  width: clamp(11rem, 18vw, 15rem);
}

.planning-search input,
.planning-select__trigger {
  height: 3rem;
  min-height: 3rem;
  border-radius: 13px;
}

.planning-search svg {
  width: 1.22rem;
  height: 1.22rem;
}

.planning-search:focus-within input {
  padding: 0.62rem 1rem 0.62rem 2.55rem;
  font-size: 0.84rem;
}

.planning-search:focus-within svg {
  left: 0.86rem;
}

.planning-select {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.5rem;
}

.planning-select__icon,
.planning-select__icon svg,
svg.planning-select__icon {
  width: 1.18rem;
  height: 1.18rem;
}

.planning-select__icon {
  left: 0.7rem;
}

.planning-select::after {
  right: 0.47rem;
  width: 0.7rem;
  height: 0.7rem;
}

.planning-select__menu {
  min-width: 14.5rem;
  padding: 0.45rem;
}

.planning-select--difficulty .planning-select__menu,
.planning-select--tag .planning-select__menu {
  right: 0;
  left: auto;
  transform-origin: top right;
}

.planning-select__option {
  min-height: 2.75rem;
  padding: 0.62rem 0.74rem;
  font-size: 0.84rem;
}

.clear-filters {
  min-width: 4.5rem;
}

/* Immediate, styled explanations for compact icon controls. */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 240;
  top: calc(100% + 0.58rem);
  left: 50%;
  width: max-content;
  max-width: min(16rem, calc(100vw - 1.5rem));
  padding: 0.48rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  color: #e8eeea;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 52%),
    rgba(12, 16, 14, 0.96);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  opacity: 0;
  color-scheme: dark;
  font-family: "Manrope", sans-serif;
  font-size: 0.73rem;
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  transform: translate(-50%, -0.25rem) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 150ms ease,
    transform 180ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.planning-select__trigger[aria-expanded="true"]::after {
  opacity: 0;
  transform: translate(-50%, -0.25rem) scale(0.98);
}

.planning-view-toggle__button:first-child::after,
.card-density::after {
  right: auto;
  left: 0;
  transform: translate(0, -0.25rem) scale(0.98);
  transform-origin: top left;
}

.planning-view-toggle__button:first-child:hover::after,
.planning-view-toggle__button:first-child:focus-visible::after,
.card-density:hover::after,
.card-density:focus-within::after {
  transform: translate(0, 0) scale(1);
}

.planning-toolbar__actions [data-tooltip]::after {
  right: 0;
  left: auto;
  transform: translate(0, -0.25rem) scale(0.98);
  transform-origin: top right;
}

.planning-toolbar__actions [data-tooltip]:is(:hover, :focus-visible, :focus-within)::after {
  transform: translate(0, 0) scale(1);
}

#planning-card-board[data-view="weeks"] .week-header {
  position: static;
  display: grid;
  grid-template-rows: 5.4rem auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-bottom-color: rgba(255, 255, 255, 0.075);
  background: rgba(20, 25, 22, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.week-header__week-slot {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 0.54rem;
  align-items: baseline;
  overflow: hidden;
  padding: 1rem 1.02rem 0.86rem;
  color: #e2f0e5;
  background:
    radial-gradient(ellipse at 12% -30%, color-mix(in srgb, var(--phase-accent) 38%, transparent), transparent 66%),
    radial-gradient(ellipse at 94% 140%, rgba(130, 220, 156, 0.12), transparent 65%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.075), transparent 31%, rgba(0, 0, 0, 0.12) 68%),
    #202a24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(178, 224, 190, 0.09),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

.week-header__week-slot::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55%;
  background:
    repeating-radial-gradient(ellipse at 42% 58%, transparent 0 8px, rgba(214, 241, 220, 0.04) 9px, transparent 10px 19px),
    repeating-linear-gradient(116deg, transparent 0 13px, rgba(255, 255, 255, 0.022) 14px, transparent 15px 27px);
  opacity: 0.85;
  transform: rotate(-6deg);
}

.week-header__week-slot::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -1px;
  left: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--phase-accent) 78%, white), transparent);
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--phase-accent) 28%, transparent);
}

.week-header__week-slot > span {
  color: color-mix(in srgb, var(--phase-accent) 72%, #e7efe9);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(0.95rem, 1.08vw, 1.14rem);
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 1rem color-mix(in srgb, var(--phase-accent) 22%, transparent);
}

#planning-card-board[data-view="weeks"] .week-header__number {
  color: #f0f7f2;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2.35rem, 2.8vw, 3rem);
  font-weight: 560;
  letter-spacing: -0.075em;
  line-height: 0.82;
  text-shadow:
    0 0 1.2rem color-mix(in srgb, var(--phase-accent) 24%, transparent),
    0 2px 12px rgba(0, 0, 0, 0.38);
}

.week-header__details {
  display: grid;
  gap: 0.5rem;
  padding: 0.78rem 0.95rem 0.82rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(14, 18, 16, 0.48);
}

#planning-card-board[data-view="weeks"] .week-header h3 {
  margin: 0;
  color: #dce4df;
  font-size: clamp(0.96rem, 1.12vw, 1.18rem);
  font-weight: 570;
  line-height: 1.25;
}

.week-header__meta {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-start;
}

#planning-card-board[data-view="weeks"] .week-header__phase,
#planning-card-board[data-view="weeks"] .week-header__load {
  color: #8f9d95;
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

#planning-card-board[data-view="weeks"] .week-header__load {
  flex: none;
  color: #a8b6ad;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

#planning-card-board[data-view="weeks"] .week-header p {
  display: none;
}

.planning-week-navigation {
  grid-template-columns: 3rem minmax(10rem, auto) 3rem;
  gap: 0.5rem;
  padding: 0.34rem;
  border-radius: 15px;
}

.planning-week-navigation__button {
  width: 3rem;
  height: 2.75rem;
  border-radius: 11px;
}

.planning-week-navigation__button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.planning-week-navigation__label {
  font-size: 0.8rem;
}

.plan-card {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.plan-card::before,
.plan-card:hover::before,
.plan-card:focus-within::before,
.plan-card.is-selected::before {
  top: 0.36rem;
  right: -1px;
  bottom: 0.36rem;
  left: auto;
  width: 7px;
  height: auto;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--discipline-accent) 80%, white), var(--discipline-accent));
  box-shadow:
    -4px 0 14px color-mix(in srgb, var(--discipline-accent) 18%, transparent),
    inset 1px 0 rgba(255, 255, 255, 0.2);
  opacity: 0.88;
}

.plan-card:hover::before,
.plan-card:focus-within::before,
.plan-card.is-selected::before {
  width: 8px;
  height: auto;
  opacity: 1;
}

.plan-card__open,
#planning-card-board[data-view="weeks"] .plan-card__open,
#planning-card-board[data-view="weeks"][data-columns] .plan-card__open {
  padding-right: max(1.12rem, calc(0.78rem + 7px));
}

/* Gold work alone carries an always-visible textured corner ribbon. */
.plan-card[data-difficulty="Gold"] .plan-card__open {
  padding-right: 3.35rem;
}

.plan-card[data-difficulty="Gold"] .plan-card__open::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 3.35rem;
  height: 3.35rem;
  background:
    repeating-linear-gradient(132deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 76% 20%, #fff1ac, transparent 28%),
    linear-gradient(135deg, #8a6021 8%, #e1b84f 50%, #8e641f 100%);
  clip-path: polygon(23% 0, 100% 0, 100% 77%);
  filter: drop-shadow(-3px 4px 5px rgba(0, 0, 0, 0.24));
  opacity: 0.88;
  pointer-events: none;
  transition:
    width 220ms ease,
    height 220ms ease,
    opacity 180ms ease,
    filter 220ms ease;
}

.plan-card[data-difficulty="Gold"]:is(:hover, :focus-within, .is-selected) .plan-card__open::before {
  width: 3.7rem;
  height: 3.7rem;
  opacity: 1;
  filter:
    drop-shadow(-3px 4px 6px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 8px rgba(226, 185, 78, 0.16));
}

.detail-pill--difficulty {
  position: relative;
  gap: 0.42rem;
  overflow: hidden;
  padding-left: 0.72rem;
}

.detail-pill--difficulty::before {
  content: "";
  width: 0.52rem;
  height: 0.52rem;
  flex: none;
  border-radius: 2px;
  background: #9ca4a7;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22);
}

.detail-pill--difficulty[data-difficulty="Copper"]::before {
  background: linear-gradient(145deg, #e0a06f, #9e5437);
  box-shadow:
    inset 0 1px rgba(255, 235, 214, 0.35),
    0 0 0.55rem rgba(197, 111, 68, 0.16);
}

.detail-pill--difficulty[data-difficulty="Gold"]::before {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #f2d878, #ad7624);
  box-shadow:
    inset 0 1px rgba(255, 250, 210, 0.45),
    0 0 0.65rem rgba(226, 185, 78, 0.2);
}

/* Focus view identifies every difficulty tier; only Gold marks closed cards. */
.card-detail[data-difficulty] {
  --difficulty-metal: #9aa2a5;
  --difficulty-metal-deep: #535b5e;
  --difficulty-metal-light: #d5dcde;
  position: relative;
}

.card-detail[data-difficulty="Copper"] {
  --difficulty-metal: #bb744d;
  --difficulty-metal-deep: #683b2b;
  --difficulty-metal-light: #ebb486;
}

.card-detail[data-difficulty="Gold"] {
  --difficulty-metal: #d6ad45;
  --difficulty-metal-deep: #76501b;
  --difficulty-metal-light: #f6df86;
}

.card-detail[data-difficulty]::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -0.15rem;
  right: -0.15rem;
  width: 4.3rem;
  height: 4.3rem;
  background:
    repeating-linear-gradient(132deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 78% 18%, var(--difficulty-metal-light), transparent 27%),
    linear-gradient(135deg, var(--difficulty-metal-deep), var(--difficulty-metal) 52%, var(--difficulty-metal-deep));
  clip-path: polygon(22% 0, 100% 0, 100% 78%);
  filter: drop-shadow(-4px 5px 7px rgba(0, 0, 0, 0.25));
  opacity: 0.78;
  pointer-events: none;
}

.card-detail[data-difficulty] .card-detail__head {
  position: relative;
  z-index: 4;
  padding-right: 3.55rem;
}

@media (max-width: 1180px) {
  .planning-toolbar__secondary {
    padding-inline: 0;
  }
}

@media (max-width: 840px) {
  .card-density {
    width: min(100%, 19rem);
  }

  .planning-select {
    flex-basis: 3.35rem;
    width: 3.35rem;
    min-width: 3.35rem;
    max-width: 3.35rem;
  }

  .planning-filter-controls {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .planning-toolbar {
    gap: 0.62rem;
    padding: 0.62rem;
  }

  .planning-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .planning-completion {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(5rem, 1fr) auto;
  }

  .planning-search {
    flex-basis: 3.15rem;
    width: 3.15rem;
  }

  .planning-search:focus-within {
    flex-basis: min(13rem, 68vw);
    width: min(13rem, 68vw);
  }

  .planning-select {
    flex-basis: 3.15rem;
    width: 3.15rem;
    min-width: 3.15rem;
    max-width: 3.15rem;
  }

  .planning-week-navigation {
    grid-template-columns: 2.85rem minmax(8.4rem, auto) 2.85rem;
  }

  .planning-week-navigation__button {
    width: 2.85rem;
    height: 2.7rem;
  }

  #planning-card-board[data-view="weeks"] .week-header {
    grid-template-rows: 5rem auto;
  }

  [data-tooltip]::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning-completion__track > span,
  [data-tooltip]::after,
  .plan-card[data-difficulty="Gold"] .plan-card__open::before {
    transition: none;
  }
}

/* Final ownership for the two-lane week board and blue-white mist. */
body[data-page="planning"] {
  background:
    radial-gradient(ellipse at 72% 7%, rgba(132, 188, 226, 0.09), transparent 31rem),
    radial-gradient(ellipse at 7% 44%, rgba(99, 162, 205, 0.065), transparent 36rem),
    linear-gradient(180deg, #181c1f 0%, #14191d 54%, #101417 100%);
}

body[data-page="planning"]::before {
  background:
    radial-gradient(ellipse 27% 19% at 12% 24%, rgba(112, 185, 232, 0.14), transparent 72%),
    radial-gradient(ellipse 22% 28% at 73% 16%, rgba(92, 159, 211, 0.11), transparent 74%),
    radial-gradient(ellipse 30% 19% at 48% 62%, rgba(141, 202, 239, 0.1), transparent 76%),
    radial-gradient(ellipse 24% 24% at 90% 81%, rgba(105, 176, 222, 0.105), transparent 75%);
  filter: blur(52px) saturate(1.04);
  opacity: 0.46;
}

body[data-page="planning"]::after {
  background:
    radial-gradient(ellipse 17% 22% at 26% 78%, rgba(211, 235, 248, 0.072), transparent 78%),
    radial-gradient(ellipse 13% 17% at 67% 43%, rgba(239, 246, 248, 0.052), transparent 79%),
    radial-gradient(ellipse 14% 19% at 96% 20%, rgba(195, 225, 243, 0.057), transparent 76%);
  filter: blur(82px) saturate(0.96);
  opacity: 0.34;
}

.plan-card,
#planning-card-board[data-view="weeks"] .plan-card {
  background:
    radial-gradient(ellipse at 88% 112%, rgba(121, 184, 224, 0.052), transparent 54%),
    radial-gradient(circle at 14% -24%, rgba(239, 247, 251, 0.07), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 4%, transparent), transparent 56%),
    rgba(40, 45, 48, 0.94);
}

.plan-card:is(:hover, :focus-within, .is-selected),
#planning-card-board[data-view="weeks"] .plan-card:is(:hover, :focus-within, .is-selected) {
  background:
    radial-gradient(ellipse at 88% 112%, rgba(151, 207, 240, 0.078), transparent 56%),
    radial-gradient(circle at 14% -24%, rgba(245, 250, 252, 0.105), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 7%, transparent), transparent 58%),
    rgba(47, 53, 57, 0.97);
}

#planning-card-board[data-view="weeks"] .planning-week-grid {
  align-items: stretch;
}

#planning-card-board[data-view="weeks"] .week-column {
  height: 30rem;
  min-height: 30rem;
  max-height: 30rem;
  overflow: visible;
  background:
    radial-gradient(ellipse at 78% -8%, rgba(126, 189, 229, 0.068), transparent 46%),
    linear-gradient(155deg, rgba(245, 250, 252, 0.034), transparent 42%),
    rgba(15, 19, 22, 0.68);
}

#planning-card-board[data-view="weeks"] .week-lane-row[data-week-lane="working"] .week-column {
  border-color: rgba(155, 208, 238, 0.115);
  background:
    radial-gradient(ellipse at 78% -8%, rgba(132, 201, 242, 0.082), transparent 48%),
    linear-gradient(155deg, rgba(239, 248, 252, 0.04), transparent 42%),
    rgba(16, 21, 25, 0.72);
}

#planning-card-board[data-view="weeks"] .week-header {
  position: relative;
  z-index: 12;
  grid-template-rows: 5.4rem auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

#planning-card-board[data-view="weeks"] .week-header__week-slot {
  overflow: hidden;
  padding-left: 4.15rem;
  background:
    radial-gradient(ellipse at 12% -30%, rgba(132, 199, 239, 0.17), transparent 66%),
    radial-gradient(ellipse at 94% 140%, rgba(191, 224, 243, 0.085), transparent 65%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.075), transparent 31%, rgba(0, 0, 0, 0.12) 68%),
    #20272c;
}

#planning-card-board[data-view="weeks"] .week-card-stack {
  display: grid;
  gap: 0.52rem;
  align-content: start;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 0.36rem 0.18rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

@media (max-width: 620px) {
  body[data-page="planning"]::before {
    opacity: 0.31;
    filter: blur(45px) saturate(1.02);
  }

  body[data-page="planning"]::after {
    display: none;
  }

  #planning-card-board[data-view="weeks"] .week-column {
    height: 26rem;
    min-height: 26rem;
    max-height: 26rem;
  }

  #planning-card-board[data-view="weeks"] .week-header {
    grid-template-rows: 5rem auto;
  }
}

/* Keep the add control out of grid flow after generic tooltip positioning. */
#planning-card-board[data-view="weeks"] .week-add-card {
  position: absolute;
  z-index: 14;
  top: 1.16rem;
  left: 0.9rem;
}

#planning-card-board[data-view="weeks"] .week-add-card::after {
  top: calc(100% + 0.48rem);
  right: auto;
  left: 0;
  transform: translate(0, -0.2rem) scale(0.98);
  transform-origin: top left;
}

#planning-card-board[data-view="weeks"] .week-add-card:is(:hover, :focus-visible)::after {
  transform: translate(0, 0) scale(1);
}

/* Working-now is a quiet continuation of each week, not a second week header. */
#planning-card-board[data-view="weeks"] .week-lane-row {
  gap: 0;
}

#planning-card-board[data-view="weeks"] .week-lane-row[data-week-lane="working"] {
  margin-top: clamp(0.58rem, 0.8vw, 0.82rem);
}

#planning-card-board[data-view="weeks"] .week-column[data-lane="working"] {
  border-color: rgba(151, 205, 236, 0.14);
  background:
    radial-gradient(ellipse at 24% -12%, rgba(151, 213, 246, 0.085), transparent 48%),
    linear-gradient(155deg, rgba(224, 243, 252, 0.035), transparent 45%),
    rgba(17, 22, 26, 0.73);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(219, 241, 252, 0.052),
    0 0 1.5rem rgba(108, 186, 231, 0.026);
}

#planning-card-board[data-view="weeks"] .week-column[data-lane="working"]::before {
  inset: 8% 7% auto;
  height: 48%;
  background: rgba(113, 190, 233, 0.052);
}

#planning-card-board[data-view="weeks"] .week-header--working {
  position: relative;
  display: block;
  flex: 0 0 3.12rem;
  width: auto;
  height: 3.12rem;
  min-height: 3.12rem;
  margin: -0.05rem -0.05rem 0.5rem;
  padding: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(166, 215, 241, 0.075);
  border-radius: 12px 12px 7px 7px;
  background:
    linear-gradient(90deg, rgba(151, 211, 243, 0.052), transparent 46%),
    rgba(20, 27, 31, 0.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
  backdrop-filter: blur(16px) saturate(1.04);
}

#planning-card-board[data-view="weeks"] .week-header--working::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.78rem;
  left: 0.78rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(159, 215, 244, 0.13), transparent 88%);
  transform: translateY(-50%);
  pointer-events: none;
}

#planning-card-board[data-view="weeks"] .week-lane-row[data-week-lane="working"] .week-empty {
  color: #718793;
  border-color: rgba(165, 211, 235, 0.075);
  background: rgba(132, 194, 226, 0.018);
}

/* Compact planning shell: one control bar, then the board. */
:root {
  --planning-header-height: 0px;
}

.planning-main {
  min-height: 100svh;
  padding-top: 0;
}

.planning-app {
  padding: clamp(0.45rem, 0.7vw, 0.7rem) clamp(0.45rem, 0.75vw, 0.8rem) 1rem;
}

.planning-loading,
.planning-error {
  min-height: calc(100svh - 1.4rem);
}

.planning-loading {
  position: fixed;
  z-index: 80;
  inset: 0;
  min-height: 100svh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(circle at 50% 50%, rgba(225, 239, 247, 0.035), transparent 9rem),
    linear-gradient(180deg, rgba(7, 11, 14, 0.08), rgba(7, 11, 14, 0.16));
  opacity: 1;
  transition: opacity 420ms cubic-bezier(0.22, 0.7, 0.24, 1);
  will-change: opacity;
}

.planning-loading.is-exiting {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .planning-loading {
    transition: none;
  }
}

.planning-content {
  gap: clamp(0.5rem, 0.65vw, 0.68rem);
}

.planning-toolbar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.48rem;
  padding: 0.58rem 0.65rem;
  border-radius: 16px;
}

.planning-toolbar__primary {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto auto;
  grid-template-areas: "brand identity filters actions";
  gap: 0.62rem;
  align-items: center;
  min-width: 0;
}

.planning-toolbar__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  min-width: 0;
  padding-right: 0.62rem;
  border-right: 1px solid rgba(215, 231, 239, 0.1);
  color: #e4e9eb;
}

.planning-toolbar__brand img {
  width: 1.42rem;
  height: 2.55rem;
  object-fit: contain;
  filter: drop-shadow(0 0 0.55rem rgba(218, 235, 244, 0.13));
}

.planning-toolbar__identity {
  grid-area: identity;
  overflow: hidden;
}

.planning-toolbar__secondary {
  grid-area: filters;
  display: flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 0;
  padding: 0 0.7rem 0 0;
  border-right: 1px solid rgba(215, 231, 239, 0.1);
  flex-wrap: nowrap;
}

.planning-toolbar__secondary .planning-filter-controls {
  flex-wrap: nowrap;
}

.planning-toolbar__actions {
  grid-area: actions;
}

#dependency-toggle {
  width: 3rem;
  min-width: 3rem;
  padding-inline: 0;
}

.planning-week-navigation {
  justify-self: center;
  margin: 0;
}

.active-filter-row {
  min-height: 0;
  padding: 0;
  border-top: 0;
}

.active-filter-row:has(.active-filter-tags:empty) {
  display: none;
}

.active-filter-tags {
  width: 100%;
  justify-content: center;
}

/* Reclaimed header space goes to the work itself. */
#planning-card-board[data-view="weeks"] .week-column[data-lane="pool"] {
  height: clamp(36rem, calc(100svh - 10.5rem), 44rem);
  min-height: clamp(36rem, calc(100svh - 10.5rem), 44rem);
  max-height: clamp(36rem, calc(100svh - 10.5rem), 44rem);
}

#planning-card-board[data-view="weeks"] .week-column[data-lane="working"] {
  height: clamp(22rem, 38svh, 30rem);
  min-height: clamp(22rem, 38svh, 30rem);
  max-height: clamp(22rem, 38svh, 30rem);
}

@media (max-width: 1200px) {
  .planning-toolbar__primary {
    grid-template-columns: auto minmax(10rem, 1fr) auto;
    grid-template-areas:
      "brand identity actions"
      "filters filters filters";
  }

  .planning-toolbar__secondary {
    justify-content: center;
    padding: 0.45rem 0 0;
    border-top: 1px solid rgba(215, 231, 239, 0.075);
    border-right: 0;
  }
}

@media (max-width: 900px) {
  .planning-toolbar {
    position: static;
    top: auto;
  }
}

@media (max-width: 720px) {
  .planning-main {
    padding-top: 0;
  }

  .planning-toolbar__primary {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "identity identity"
      "filters filters";
  }

  .planning-toolbar__brand {
    padding-right: 0;
    border-right: 0;
  }

  .planning-toolbar__actions {
    display: flex;
    align-self: center;
    justify-self: start;
    justify-content: flex-start;
    min-width: 0;
    width: auto;
  }

  .planning-completion {
    grid-column: auto;
    grid-template-columns: auto minmax(2.4rem, 3.4rem) auto;
    gap: 0.38rem;
    padding-inline: 0.52rem;
  }

  #dependency-toggle {
    width: 2.75rem;
    min-width: 2.75rem;
  }

  .planning-toolbar__identity {
    width: 100%;
    align-items: center;
    flex-direction: row;
  }

  .planning-toolbar__secondary {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .planning-toolbar__secondary::-webkit-scrollbar {
    display: none;
  }

  .planning-filter-controls {
    width: auto;
  }

  .planning-week-navigation {
    width: min(100%, 18rem);
  }

  #planning-card-board[data-view="weeks"] .week-column[data-lane="pool"] {
    height: 32rem;
    min-height: 32rem;
    max-height: 32rem;
  }

  #planning-card-board[data-view="weeks"] .week-column[data-lane="working"] {
    height: 20rem;
    min-height: 20rem;
    max-height: 20rem;
  }
}

@media (max-width: 480px) {
  .planning-toolbar__brand img {
    width: 1.2rem;
    height: 2.2rem;
  }

}

/* Title-driven card sizing -------------------------------------------------
   Cards keep a comfortable one-line floor, then grow with the complete title.
   The board/lane remains the scrolling surface; individual cards never clamp. */
.planning-card-grid {
  align-items: start;
}

#planning-card-board[data-view="all"] {
  --adaptive-card-min-height: 4.7rem;
  --adaptive-card-pad-block: clamp(1rem, 1.35vw, 1.32rem);
  --adaptive-card-pad-inline: clamp(1.05rem, 1.5vw, 1.48rem);
}

#planning-card-board[data-view="all"][data-columns="1"] {
  --adaptive-card-min-height: 6.8rem;
  --adaptive-card-pad-block: clamp(1.35rem, 2.25vw, 1.9rem);
  --adaptive-card-pad-inline: clamp(1.45rem, 2.5vw, 2.15rem);
}

#planning-card-board[data-view="all"][data-columns="2"] {
  --adaptive-card-min-height: 5.8rem;
  --adaptive-card-pad-block: clamp(1.18rem, 1.8vw, 1.58rem);
  --adaptive-card-pad-inline: clamp(1.25rem, 2vw, 1.72rem);
}

#planning-card-board[data-view="all"][data-columns="4"] {
  --adaptive-card-min-height: 4.3rem;
  --adaptive-card-pad-block: clamp(0.9rem, 1.15vw, 1.1rem);
  --adaptive-card-pad-inline: clamp(0.95rem, 1.25vw, 1.18rem);
}

#planning-card-board[data-view="all"][data-columns="5"] {
  --adaptive-card-min-height: 4rem;
  --adaptive-card-pad-block: clamp(0.82rem, 1vw, 1rem);
  --adaptive-card-pad-inline: clamp(0.88rem, 1.1vw, 1.08rem);
}

#planning-card-board[data-view="all"][data-columns="6"] {
  --adaptive-card-min-height: 3.75rem;
  --adaptive-card-pad-block: clamp(0.76rem, 0.9vw, 0.9rem);
  --adaptive-card-pad-inline: clamp(0.82rem, 1vw, 1rem);
}

#planning-card-board[data-view="all"][data-columns="7"] {
  --adaptive-card-min-height: 3.55rem;
  --adaptive-card-pad-block: clamp(0.7rem, 0.82vw, 0.82rem);
  --adaptive-card-pad-inline: clamp(0.76rem, 0.9vw, 0.9rem);
}

#planning-card-board[data-view="all"][data-columns="8"] {
  --adaptive-card-min-height: 3.4rem;
  --adaptive-card-pad-block: clamp(0.66rem, 0.76vw, 0.76rem);
  --adaptive-card-pad-inline: clamp(0.7rem, 0.82vw, 0.82rem);
}

#planning-card-board[data-view="all"][data-columns="9"] {
  --adaptive-card-min-height: 3.25rem;
  --adaptive-card-pad-block: clamp(0.62rem, 0.7vw, 0.7rem);
  --adaptive-card-pad-inline: clamp(0.66rem, 0.76vw, 0.76rem);
}

#planning-card-board[data-view="all"] .plan-card,
#planning-card-board[data-view="all"][data-columns] .plan-card {
  align-self: start;
  height: auto;
  min-height: var(--adaptive-card-min-height);
}

#planning-card-board[data-view="all"] .plan-card__open,
#planning-card-board[data-view="all"][data-columns] .plan-card__open {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: var(--adaptive-card-min-height);
  padding-block: var(--adaptive-card-pad-block);
  padding-left: var(--adaptive-card-pad-inline);
  padding-right: max(var(--adaptive-card-pad-inline), calc(0.78rem + 7px));
}

#planning-card-board[data-view="all"] .plan-card[data-difficulty="Gold"] .plan-card__open {
  padding-right: max(3.35rem, var(--adaptive-card-pad-inline));
}

#planning-card-board[data-view="weeks"] .week-card-stack {
  gap: 0.6rem;
  padding-bottom: 0.4rem;
}

#planning-card-board[data-view="weeks"] .plan-card,
#planning-card-board[data-view="weeks"][data-columns] .plan-card {
  align-self: start;
  height: auto;
  min-height: 3.65rem;
}

#planning-card-board[data-view="weeks"] .plan-card__open,
#planning-card-board[data-view="weeks"][data-columns] .plan-card__open {
  flex: 0 0 auto;
  height: auto;
  min-height: 3.65rem;
  padding-block: 0.72rem 0.82rem;
}

#planning-card-board .plan-card h4,
#planning-card-board[data-columns] .plan-card h4 {
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

@media (max-width: 620px) {
  #planning-card-board[data-view="all"],
  #planning-card-board[data-view="all"][data-columns] {
    --adaptive-card-min-height: 5rem;
    --adaptive-card-pad-block: 1rem;
    --adaptive-card-pad-inline: 1.05rem;
  }

  #planning-card-board[data-view="weeks"] .plan-card,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card,
  #planning-card-board[data-view="weeks"] .plan-card__open,
  #planning-card-board[data-view="weeks"][data-columns] .plan-card__open {
    min-height: 3.6rem;
  }
}

/* Document scroll ---------------------------------------------------------
   The page keeps native wheel, touch, and keyboard scrolling, but represents
   its position with a layout-neutral Ferrari-red glass overlay. */
html:has(body[data-page="planning"]),
body[data-page="planning"] {
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(body[data-page="planning"])::-webkit-scrollbar,
body[data-page="planning"]::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.document-scrollbar {
  --document-scrollbar-red: #ff2800;
  position: fixed;
  z-index: 65;
  top: max(0.65rem, env(safe-area-inset-top));
  right: max(0.2rem, env(safe-area-inset-right));
  bottom: max(0.65rem, env(safe-area-inset-bottom));
  width: 0.42rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.12rem);
  transition:
    opacity 320ms cubic-bezier(0.22, 0.7, 0.24, 1),
    transform 320ms cubic-bezier(0.22, 0.7, 0.24, 1);
  contain: strict;
}

.document-scrollbar.can-scroll.is-scrolling,
.document-scrollbar.can-scroll.is-dragging {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.document-scrollbar__track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 116, 92, 0.11);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 40, 0, 0.055)),
    rgba(16, 19, 21, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 0.55rem rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
  backdrop-filter: blur(12px) saturate(1.18);
  cursor: pointer;
  touch-action: none;
}

.document-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  min-height: 2.375rem;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 46%),
    linear-gradient(180deg, #ff6042 0%, var(--document-scrollbar-red) 31%, #dc1800 72%, #9d0e00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 222, 0.46),
    inset -1px 0 0 rgba(92, 4, 0, 0.28),
    0 0 0.7rem rgba(255, 40, 0, 0.34),
    0 0 0.18rem rgba(255, 119, 94, 0.42);
  cursor: grab;
  will-change: transform;
}

.document-scrollbar__thumb:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 237, 0.58),
    inset -1px 0 0 rgba(92, 4, 0, 0.24),
    0 0 0.9rem rgba(255, 40, 0, 0.46),
    0 0 0.26rem rgba(255, 133, 108, 0.54);
}

.document-scrollbar.is-dragging .document-scrollbar__thumb,
body.is-document-scrollbar-dragging {
  cursor: grabbing;
}

body.is-document-scrollbar-dragging {
  user-select: none;
}

body.has-card-drawer .document-scrollbar {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .document-scrollbar {
    transition: none;
  }
}

/* Team authentication -----------------------------------------------------
   The account control shares the existing week-navigation row, so adding it
   does not claim another line of vertical toolbar space. */
.planning-toolbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.planning-toolbar__primary {
  grid-column: 1 / -1;
  grid-row: 1;
}

.planning-week-navigation {
  grid-column: 2;
  grid-row: 2;
}

.planning-auth-toggle {
  position: relative;
  z-index: 6;
  grid-column: 3;
  grid-row: 2;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: 3.5rem;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(221, 232, 238, 0.12);
  border-radius: 11px;
  outline: none;
  color: #aebbc2;
  background:
    radial-gradient(circle at 50% 116%, rgba(151, 209, 237, 0.1), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 52%),
    rgba(13, 18, 21, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 8px 22px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 190ms ease,
    transform 190ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.planning-auth-toggle:is(:hover, :focus-visible) {
  color: #f3f8fb;
  border-color: rgba(224, 239, 247, 0.28);
  background:
    radial-gradient(circle at 50% 116%, rgba(158, 219, 248, 0.17), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 52%),
    rgba(18, 24, 28, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 1rem rgba(181, 224, 246, 0.1),
    0 10px 25px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.planning-auth-toggle:focus-visible {
  outline: 2px solid rgba(210, 234, 246, 0.58);
  outline-offset: 2px;
}

.planning-auth-toggle[data-auth-state="signed-in"] {
  border-color: rgba(205, 231, 216, 0.19);
  color: #e9f4ed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 1.05rem rgba(120, 203, 158, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

.planning-auth-toggle__login {
  width: 1.22rem;
  height: 1.22rem;
}

.planning-auth-toggle__avatar {
  display: block;
  width: 2.18rem;
  height: 2.18rem;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 0.45rem rgba(190, 230, 210, 0.13));
}

.planning-auth-toggle__avatar[hidden],
.planning-auth-toggle[data-auth-state="signed-in"] .planning-auth-toggle__login {
  display: none;
}

.planning-auth-toggle::after {
  right: 0;
  left: auto;
  transform: translate(0, -0.25rem) scale(0.98);
  transform-origin: top right;
}

.planning-auth-toggle:is(:hover, :focus-visible)::after {
  transform: translate(0, 0) scale(1);
}

.active-filter-row {
  grid-column: 1 / -1;
}

.planning-auth-panel {
  display: grid;
  gap: 0.9rem;
}

.planning-auth-panel[hidden],
.planning-auth-account[hidden] {
  display: none;
}

.planning-auth-avatars {
  display: flex;
  gap: 0.72rem;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  padding: 0.4rem 3.4rem 0.55rem;
}

.planning-auth-avatar-option,
.planning-auth-account__avatar,
.planning-dialog__logout {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.55rem;
  height: 3.55rem;
  padding: 0.22rem;
  border: 1px solid rgba(222, 234, 240, 0.11);
  border-radius: 50%;
  outline: none;
  color: #b7c2c8;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 48%),
    rgba(26, 32, 35, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 9px 24px rgba(0, 0, 0, 0.22);
}

.planning-auth-avatar-option {
  cursor: pointer;
  transition:
    opacity 150ms ease,
    border-color 170ms ease,
    box-shadow 190ms ease,
    transform 210ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.planning-auth-avatar-option img,
.planning-auth-account__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.planning-auth-avatar-option:not([aria-pressed="true"]) {
  opacity: 0.68;
}

.planning-auth-avatar-option:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  filter: grayscale(0.72);
}

.planning-auth-avatar-option:is(:hover, :focus-visible),
.planning-auth-avatar-option[aria-pressed="true"] {
  opacity: 1;
  border-color: rgba(230, 241, 246, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 1rem rgba(177, 219, 239, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px) scale(1.035);
}

.planning-auth-avatar-option:focus-visible,
.planning-dialog__logout:focus-visible,
.planning-auth-account__avatar:focus-visible {
  outline: 2px solid rgba(216, 237, 247, 0.56);
  outline-offset: 3px;
}

.planning-auth-avatar-option[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  right: -0.12rem;
  bottom: -0.12rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid #14191c;
  border-radius: 50%;
  background: #83c99a;
  box-shadow: 0 0 0.6rem rgba(112, 211, 145, 0.3);
}

.planning-auth-account {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
}

.planning-auth-account__avatar {
  cursor: default;
}

.planning-dialog__logout {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 12px;
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 190ms ease,
    transform 190ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.planning-dialog__logout svg {
  width: 1.2rem;
  height: 1.2rem;
}

.planning-dialog__logout:is(:hover, :focus-visible) {
  color: #f4d7d2;
  border-color: rgba(239, 157, 145, 0.25);
  background: rgba(128, 54, 46, 0.16);
  box-shadow: 0 0 0.9rem rgba(226, 96, 78, 0.08);
  transform: translateY(-1px);
}

/* Focus-only authorship marks. The renderer supplies the actor, timestamp,
   avatar source, tooltip, and either a plus or pencil badge. */
.card-detail__audit {
  display: flex;
  gap: 0.62rem;
  align-items: center;
  width: fit-content;
  min-height: 3rem;
  margin-top: 0.15rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid rgba(220, 231, 236, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.card-audit-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.1rem;
  border: 1px solid rgba(222, 234, 240, 0.12);
  border-radius: 50%;
  outline: none;
  background: rgba(18, 23, 26, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 5px 14px rgba(0, 0, 0, 0.18);
}

.card-audit-avatar img,
.card-audit-avatar > svg:not(.card-audit-avatar__badge) {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.card-audit-avatar:focus-visible {
  outline: 2px solid rgba(214, 235, 246, 0.52);
  outline-offset: 2px;
}

.card-audit-avatar__badge {
  position: absolute;
  right: -0.22rem;
  bottom: -0.18rem;
  display: grid;
  place-items: center;
  width: 0.92rem;
  height: 0.92rem;
  padding: 0.17rem;
  border: 2px solid #252a2c;
  border-radius: 50%;
  color: #dce8ed;
  background: #41505a;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.34);
}

.card-audit-avatar__badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card-detail__audit .card-audit-avatar:first-child .card-audit-avatar__badge,
.card-audit-avatar[data-audit-kind="created"] .card-audit-avatar__badge {
  color: #dff4e6;
  background: #47765a;
}

.card-detail__audit .card-audit-avatar:last-child .card-audit-avatar__badge,
.card-audit-avatar[data-audit-kind="updated"] .card-audit-avatar__badge {
  color: #f4e4d7;
  background: #7b5b46;
}

@media (max-width: 720px) {
  .planning-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .planning-week-navigation {
    grid-column: 1;
    width: min(100%, 18rem);
  }

  .planning-auth-toggle {
    grid-column: 2;
    margin-inline-end: 0.15rem;
  }
}

/* All Cards has no week navigator, so its account control joins the primary
   controls without reserving an otherwise empty second toolbar row. */
.planning-content[data-view="all"] .planning-toolbar__actions {
  padding-inline-end: 3.3rem;
}

.planning-content[data-view="all"] .planning-auth-toggle {
  position: absolute;
  top: 0.58rem;
  right: 0.65rem;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
}

@media (max-width: 380px) {
  .planning-week-navigation {
    grid-template-columns: 2.45rem minmax(6.4rem, auto) 2.45rem;
    gap: 0.34rem;
    padding: 0.28rem;
  }

  .planning-week-navigation__button {
    width: 2.45rem;
    height: 2.55rem;
  }

  .planning-week-navigation__label {
    font-size: 0.71rem;
  }

  .planning-auth-toggle {
    width: 2.55rem;
    height: 2.55rem;
    margin-inline-end: 0;
  }

  .planning-auth-avatars {
    gap: 0.55rem;
    padding-inline: 2.8rem;
  }

  .planning-auth-avatar-option {
    width: 3.2rem;
    height: 3.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning-auth-toggle,
  .planning-auth-avatar-option,
  .planning-dialog__logout {
    transition: none;
  }
}

/* Category color mode -----------------------------------------------------
   The seven existing discipline accents become deep, muted card surfaces.
   This is a local display mode; difficulty ribbons and focus details stay put. */
.planning-color-mode-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 2.7rem;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid rgba(151, 207, 236, 0.2);
  border-radius: 12px;
  outline: none;
  color: #aed8eb;
  background:
    radial-gradient(circle at 28% 4%, rgba(211, 239, 252, 0.13), transparent 48%),
    linear-gradient(150deg, rgba(80, 157, 199, 0.15), rgba(22, 42, 54, 0.08)),
    rgba(13, 23, 30, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(226, 246, 255, 0.07),
    0 8px 20px rgba(0, 0, 0, 0.17),
    0 0 1rem rgba(100, 184, 228, 0.045);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  backdrop-filter: blur(18px) saturate(1.14);
  cursor: pointer;
  transition:
    color 170ms ease,
    border-color 190ms ease,
    background 210ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.18, 0.78, 0.2, 1);
}

.planning-color-mode-toggle svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  filter: drop-shadow(0 0 0.38rem rgba(143, 210, 243, 0.12));
}

.planning-color-mode-toggle__swatch {
  stroke: rgba(13, 23, 29, 0.5);
  stroke-width: 0.5;
}

.planning-color-mode-toggle__swatch--blue {
  fill: var(--plan-code);
}

.planning-color-mode-toggle__swatch--gold {
  fill: var(--plan-vfx);
}

.planning-color-mode-toggle__swatch--green {
  fill: var(--plan-art);
}

.planning-color-mode-toggle:is(:hover, :focus-visible) {
  color: #e8f7fd;
  border-color: rgba(177, 223, 246, 0.38);
  background:
    radial-gradient(circle at 28% 4%, rgba(222, 244, 255, 0.19), transparent 50%),
    linear-gradient(150deg, rgba(94, 177, 221, 0.21), rgba(25, 49, 63, 0.12)),
    rgba(15, 28, 36, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(235, 249, 255, 0.1),
    0 11px 25px rgba(0, 0, 0, 0.22),
    0 0 1.15rem rgba(116, 199, 241, 0.11);
  transform: translateY(-2px);
}

.planning-color-mode-toggle:focus-visible {
  outline: 2px solid rgba(191, 227, 246, 0.55);
  outline-offset: 2px;
}

.planning-color-mode-toggle[aria-pressed="true"] {
  color: #f0fbff;
  border-color: rgba(164, 220, 248, 0.48);
  background:
    radial-gradient(circle at 25% 2%, rgba(229, 248, 255, 0.24), transparent 50%),
    linear-gradient(145deg, rgba(86, 181, 230, 0.3), rgba(31, 70, 91, 0.18)),
    rgba(14, 31, 41, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(240, 251, 255, 0.13),
    0 0 0 1px rgba(131, 203, 239, 0.07),
    0 0 1.35rem rgba(104, 195, 241, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card {
  border-color: color-mix(in srgb, var(--discipline-accent) 45%, #394145);
  color: #eef3f5;
  background:
    radial-gradient(circle at 14% -18%, rgba(255, 255, 255, 0.075), transparent 43%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--discipline-accent) 34%, #20262a),
      color-mix(in srgb, var(--discipline-accent) 24%, #151a1d)
    );
  box-shadow:
    0 14px 29px rgba(0, 0, 0, 0.31),
    0 0 1.1rem color-mix(in srgb, var(--discipline-accent) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card:is(:hover, :focus-within, .is-selected) {
  border-color: color-mix(in srgb, var(--discipline-accent) 58%, #566168);
  background:
    radial-gradient(circle at 14% -18%, rgba(255, 255, 255, 0.11), transparent 45%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--discipline-accent) 42%, #252b2e),
      color-mix(in srgb, var(--discipline-accent) 30%, #192024)
    );
  box-shadow:
    0 27px 48px -17px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 1.75rem color-mix(in srgb, var(--discipline-accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card h4 {
  color: #eef3f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* The whole card now carries its discipline, so the normal right stripe rests. */
.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card::before,
.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card:is(:hover, :focus-within, .is-selected)::before {
  width: 0;
  opacity: 0;
  box-shadow: none;
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card.is-reorderable::after {
  background-image: radial-gradient(circle, rgba(232, 241, 245, 0.52) 1.15px, transparent 1.4px);
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card__open:focus-visible {
  outline-color: rgba(236, 247, 251, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .planning-color-mode-toggle {
    transition: none;
  }
}

/* Content-sized working lanes ---------------------------------------------
   Empty working columns retain a useful drop target, then grow with their
   cards until the compact lane reaches its scrollable ceiling. */
#planning-card-board[data-view="weeks"] .week-column[data-lane="working"] {
  --working-column-empty-height: clamp(12rem, 16svh, 15rem);
  --working-column-card-growth: 0rem;
  --working-column-max-height: clamp(24rem, 38svh, 30rem);
  --working-column-height: min(
    calc(var(--working-column-empty-height) + var(--working-column-card-growth)),
    var(--working-column-max-height)
  );
  align-self: start;
  height: auto;
  min-height: var(--working-column-height);
  max-height: var(--working-column-max-height);
  outline: 2px solid rgba(246, 250, 252, 0.52);
  outline-offset: -2px;
}

#planning-card-board[data-view="weeks"] .week-column[data-lane="working"] .week-card-stack {
  height: auto;
  min-height: calc(var(--working-column-height) - 4.8rem);
  max-height: calc(var(--working-column-max-height) - 4.8rem);
  overflow-y: auto;
}

@media (max-width: 720px) {
  #planning-card-board[data-view="weeks"] .week-column[data-lane="working"] {
    --working-column-empty-height: 12rem;
    --working-column-max-height: 24rem;
  }
}

/* Daily progress ---------------------------------------------------------
   Dates and completion share the compact card itself; the week header is
   only its week number and calendar range, with no second description box. */
#planning-card-board[data-view="weeks"] .week-column[data-lane="pool"] .week-header {
  grid-template-rows: minmax(5.4rem, auto);
}

#planning-card-board[data-view="weeks"] .week-header__week-slot {
  flex-wrap: wrap;
  column-gap: 0.8rem;
  row-gap: 0.45rem;
  align-content: center;
  padding-block: 0.85rem;
}

.week-header__week-name {
  flex: 0 0 auto;
}

.week-header__week-slot > .week-header__dates {
  margin-inline-start: auto;
  color: #b5c3ca;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.3;
  text-align: right;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
}

.planning-week-navigation {
  max-width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.planning-week-navigation__label {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.8rem;
  row-gap: 0.2rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-block: 0.15rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
}

.planning-week-window__summary,
.planning-week-window__dates {
  white-space: nowrap;
}

.planning-week-window__dates {
  color: #aebec6;
  font-size: 0.72rem;
  font-weight: 500;
}

.planning-content:not([data-card-color-mode="category"]) #planning-card-board .plan-card {
  background:
    radial-gradient(circle at 14% -24%, rgba(239, 247, 251, 0.025), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 2%, transparent), transparent 56%),
    #1c2225;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.19), inset 0 1px rgba(239, 236, 226, 0.06);
}

.planning-content:not([data-card-color-mode="category"]) #planning-card-board .plan-card:is(:hover, :focus-within, .is-selected) {
  background:
    radial-gradient(circle at 14% -24%, rgba(245, 250, 252, 0.04), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--discipline-accent) 3%, transparent), transparent 58%),
    #22292d;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.24), inset 0 1px rgba(239, 236, 226, 0.095);
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card {
  background:
    radial-gradient(circle at 14% -18%, rgba(255, 255, 255, 0.025), transparent 43%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--discipline-accent) 28%, #192024),
      color-mix(in srgb, var(--discipline-accent) 20%, #11171a));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px rgba(239, 236, 226, 0.06);
}

.planning-content[data-card-color-mode="category"] #planning-card-board .plan-card:is(:hover, :focus-within, .is-selected) {
  background:
    radial-gradient(circle at 14% -18%, rgba(255, 255, 255, 0.04), transparent 45%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--discipline-accent) 34%, #1d2529),
      color-mix(in srgb, var(--discipline-accent) 24%, #141c20));
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25), inset 0 1px rgba(239, 236, 226, 0.095);
}

/* A fine warm-white rim catches light without brightening the card surface. */
.planning-content #planning-card-board[data-view] .plan-card {
  border: 1px solid rgba(239, 236, 226, 0.22);
  border-top-color: rgba(239, 236, 226, 0.32);
  border-bottom-color: rgba(239, 236, 226, 0.14);
}

.planning-content #planning-card-board[data-view] .plan-card:is(:hover, :focus-within, .is-selected) {
  border-color: rgba(239, 236, 226, 0.32);
  border-top-color: rgba(239, 236, 226, 0.44);
  border-bottom-color: rgba(239, 236, 226, 0.22);
}

#planning-card-board[data-view] .plan-card,
#planning-card-board[data-view][data-columns] .plan-card {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  align-items: stretch;
  height: auto;
  min-height: 3.4rem;
}

#planning-card-board[data-view] .plan-card__open,
#planning-card-board[data-view][data-columns] .plan-card__open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.85rem;
  align-items: center;
  min-width: 0;
  height: auto;
  min-height: 3.4rem;
  padding: 0.62rem 1.05rem 0.62rem 0.12rem;
}

#planning-card-board[data-view="all"] .plan-card,
#planning-card-board[data-view="all"][data-columns] .plan-card,
#planning-card-board[data-view="all"] .plan-card__open,
#planning-card-board[data-view="all"][data-columns] .plan-card__open {
  min-height: max(3.4rem, calc(var(--adaptive-card-min-height) - 0.25rem));
}

#planning-card-board[data-view] .plan-card h4 {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: #e3e9ec;
  text-align: left;
}

#planning-card-board .plan-card__open::after {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.035), transparent 38%),
    linear-gradient(112deg, transparent 22%, rgba(255, 255, 255, 0.018) 49%, transparent 72%);
}

.plan-card__date {
  position: relative;
  z-index: 1;
  align-self: center;
  color: #bdc9d0;
  font-family: "Manrope", sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
}

/* The assignee's animal peeks over the edge like a small enamel sticker.
   It stays outside the clipped button sheen and never intercepts card input. */
#planning-card-board[data-view] .plan-card {
  container-type: inline-size;
}

#planning-card-board[data-view] .plan-card.has-assignee {
  overflow: visible;
}

#planning-card-board[data-view] .plan-card.has-assignee .plan-card__open,
#planning-card-board[data-view][data-columns] .plan-card.has-assignee .plan-card__open {
  padding-right: 2.65rem;
  border-radius: inherit;
}

.plan-card__assignee {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: -0.18rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 1px;
  border: 1px solid rgba(239, 236, 226, 0.48);
  border-top-color: rgba(250, 246, 234, 0.72);
  border-radius: 50%;
  background: #182125;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 250, 232, 0.12);
  transform: translateY(-50%) rotate(7deg);
  transition: transform 260ms cubic-bezier(0.2, 1.35, 0.35, 1), border-color 180ms ease;
  pointer-events: none;
  user-select: none;
}

.plan-card__assignee img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.plan-card:is(:hover, :focus-within) .plan-card__assignee {
  border-color: rgba(250, 246, 234, 0.7);
  transform: translateY(-50%) rotate(0deg) scale(1.06);
}

/* At high grid densities, keep the date from squeezing the title to nothing. */
@container (max-width: 15rem) {
  #planning-card-board[data-view] .plan-card .plan-card__open,
  #planning-card-board[data-view][data-columns] .plan-card .plan-card__open {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.4rem;
  }

  .plan-card__date {
    justify-self: end;
  }
}

/* The completion target replaces the drag dots; the card still supports drag. */
#planning-card-board .plan-card.is-reorderable::after {
  display: none;
}

.plan-card__complete {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
}

.plan-card__complete input {
  appearance: none;
  grid-area: 1 / 1;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  border: 1px solid #7e919d;
  border-radius: 5px;
  background: #172024;
  cursor: inherit;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.plan-card__checkmark {
  grid-area: 1 / 1;
  width: 0.6rem;
  height: 0.34rem;
  margin-bottom: 0.16rem;
  border-bottom: 2px solid #eef8f1;
  border-left: 2px solid #eef8f1;
  opacity: 0;
  transform: rotate(-45deg) scale(0.5);
  transition: opacity 140ms ease, transform 210ms cubic-bezier(0.2, 1.5, 0.35, 1);
  pointer-events: none;
}

.plan-card__complete:hover input:not(:disabled) {
  border-color: #bfced6;
  box-shadow: 0 0 0 3px rgba(180, 210, 225, 0.075);
}

.plan-card__complete input:checked {
  border-color: #a1c5b1;
  background: #456a56;
}

.plan-card__complete input:checked + .plan-card__checkmark {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.plan-card__complete input:focus-visible {
  outline: 2px solid #c6dfeb;
  outline-offset: 3px;
}

.plan-card__complete:has(input:disabled) {
  cursor: wait;
}

.plan-card__complete input:disabled {
  opacity: 0.65;
}

#planning-card-board .plan-card[data-status="Done"] h4 {
  color: #c3d0c9;
}

#planning-card-board .plan-card[data-completion-saving="true"]::after {
  display: none;
}

/* A small Gold corner retains its distinction without covering the date. */
#planning-card-board[data-view] .plan-card[data-difficulty="Gold"] .plan-card__open {
  padding-right: 2.3rem;
}

#planning-card-board .plan-card[data-difficulty="Gold"] .plan-card__open::before {
  width: 1.8rem;
  height: 1.8rem;
}

#planning-card-board .plan-card[data-difficulty="Gold"]:is(:hover, :focus-within, .is-selected) .plan-card__open::before {
  width: 2rem;
  height: 2rem;
}

.planning-form-field textarea.planning-form-title,
.planning-form-field textarea[name="title"] {
  min-height: 5rem;
  field-sizing: content;
}

.planning-form-advanced {
  min-width: 0;
  padding-top: 0.1rem;
  border-top: 1px solid rgba(205, 223, 233, 0.1);
}

.planning-form-advanced > summary {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 2.75rem;
  color: #afbec6;
  font-size: 0.84rem;
  list-style: none;
  cursor: pointer;
}

.planning-form-advanced > summary::-webkit-details-marker {
  display: none;
}

.planning-form-advanced > summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-inline: 0.12rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.planning-form-advanced[open] > summary::before {
  transform: rotate(135deg);
}

.planning-form-advanced > summary:is(:hover, :focus-visible) {
  color: #e0eaf0;
}

.planning-form-advanced > summary:focus-visible {
  outline: 2px solid #b1cbd9;
  outline-offset: 2px;
  border-radius: 5px;
}

.planning-form-advanced > .planning-form-grid {
  padding-block: 0.35rem 0.8rem;
}

.planning-assignee-field {
  min-width: 0;
  margin: 0.35rem 0 1rem;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 1px solid rgba(205, 224, 228, 0.12);
}

.planning-assignee-field legend {
  margin-bottom: 0.65rem;
  color: #c8d9df;
  font-size: 0.85rem;
  font-weight: 600;
}

.planning-assignee-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.planning-assignee-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.planning-assignee-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.planning-assignee-option__face {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border: 1px solid rgba(205, 224, 228, 0.18);
  border-radius: 11px;
  background: rgba(12, 20, 24, 0.5);
  color: #b4c4cc;
  font-size: 0.82rem;
}

.planning-assignee-option__face > img,
.planning-assignee-option__face > svg {
  flex: 0 0 36px;
}

.planning-assignee-option > input:checked + .planning-assignee-option__face {
  border-color: #c7d9df;
  background: #293b42;
  color: #f0ede2;
  box-shadow: inset 0 0 0 1px rgba(220, 234, 235, 0.2);
}

.planning-assignee-option:hover > input:not(:disabled) + .planning-assignee-option__face {
  border-color: #95b1bf;
}

.planning-assignee-option > input:focus-visible + .planning-assignee-option__face {
  outline: 2px solid #c7d9df;
  outline-offset: 3px;
}

.planning-assignee-option > input:disabled + .planning-assignee-option__face {
  opacity: 0.65;
  cursor: not-allowed;
}

.card-detail__assignee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.65rem 0;
  color: #c8d9df;
  font-size: 0.9rem;
}

.card-detail__assignee img {
  flex: 0 0 28px;
}

/* Creation/editing is content-sized; the larger focused-card reader stays intact. */
.card-drawer:has(#planning-card-form) {
  display: flex;
  flex-direction: column;
  width: min(52rem, calc(100vw - 1.5rem));
  height: auto;
  max-height: 88svh;
}

.card-drawer:has(#planning-card-form) .card-drawer__chrome {
  flex: 0 0 auto;
  min-height: 4rem;
  padding: 0.75rem clamp(1.1rem, 2.8vw, 1.8rem);
}

.card-drawer:has(#planning-card-form) .card-drawer__body {
  --planning-form-padding: clamp(1.1rem, 2.8vw, 1.8rem);
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(88svh - 4rem);
  padding: var(--planning-form-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#planning-card-form {
  gap: 1.15rem;
}

#planning-card-form .form-actions {
  bottom: calc(-1 * var(--planning-form-padding));
  margin: 0 calc(-1 * var(--planning-form-padding)) calc(-1 * var(--planning-form-padding));
  padding: 0.9rem var(--planning-form-padding) max(0.9rem, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
  /* Both lanes share one comfortably readable column width and scroll together. */
  #planning-card-board[data-view="weeks"] .planning-week-board {
    --daily-week-column-width: min(22rem, calc(100vw - 2rem));
    width: max-content;
    min-width: 0;
  }

  #planning-card-board[data-view="weeks"] .planning-week-grid {
    grid-template-columns: repeat(4, var(--daily-week-column-width));
    min-width: 0;
  }

  .planning-week-navigation {
    width: min(100%, 22rem);
  }

  .planning-week-window__summary {
    font-size: 0.72rem;
  }

  .planning-week-window__dates {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card__assignee,
  .plan-card__complete input,
  .plan-card__checkmark,
  .planning-form-advanced > summary::before {
    transition: none;
  }

  .plan-card:is(:hover, :focus-within) .plan-card__assignee {
    transform: translateY(-50%) rotate(7deg);
  }
}

@media (forced-colors: active) {
  .plan-card__assignee {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .plan-card__complete input {
    appearance: auto;
  }

  .plan-card__checkmark {
    display: none;
  }
}