/* План на сегодня: панель со шкалой над полосами состояний. */

.plan {
  margin: 0 var(--gut) 16px; padding: 12px 16px 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s;
}
.plan[data-state='complete'] { border-color: color-mix(in srgb, var(--st-active) 55%, var(--line)); }
.planhead { display: flex; align-items: center; gap: 10px; }
.planhead > .ic { color: var(--accent); }
.planhead b { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.planhead .rule { flex: 1; }
/* итог: цифры дисплейным шрифтом, слова — обычным и приглушённо, между ними воздух */
.planhead em { display: inline-flex; align-items: baseline; gap: 5px; font-style: normal; white-space: nowrap; }
.planhead em b { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.planhead em span { font-size: 13px; color: var(--dim); }
.planhead em.ok { font-size: 14px; font-weight: 600; color: var(--st-active); }
.planhead em.over {
  font-size: 13px; font-weight: 600; color: var(--st-active); gap: 4px;
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st-active) 13%, transparent);
}
.planhead em.over span { color: inherit; font-weight: 500; }
.planedit {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--dim); border: 1px solid var(--line);
}
.planedit:hover { color: var(--ink); background: var(--press); }

/* сама шкала: дорастает, а не перескакивает (ширину подставляет app.js) */
.bar { height: 8px; margin: 12px 0 10px; border-radius: 4px; background: var(--line2); overflow: hidden; }
.bar .fill {
  display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent);
  transition: width .7s var(--ease), background .3s;
}
.plan[data-state='complete'] .bar .fill { background: var(--st-active); }

.plandone { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--st-active); margin-bottom: 6px; }
.planempty { padding: 8px 0 10px; font-size: 14px; color: var(--dim); line-height: 1.45; }
.planempty small { display: block; font-size: 13px; margin-top: 4px; }

/* выбранные задачи: кольцо показывает долю, полное — галочку */
.planlist { display: flex; flex-direction: column; }
.pitem {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line2);
  font-size: 15px;
}
.pitem:hover { background: linear-gradient(90deg, transparent, var(--press) 12%, var(--press) 88%, transparent); }
.pitem span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem small { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.pitem[data-done='1'] span { color: var(--dim); }
.pitem .ring {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--line2) 0);
  position: relative; color: var(--bg); transition: background .5s;
}
.pitem .ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel); }
.pitem[data-done='1'] .ring { background: var(--st-active); }
.pitem[data-done='1'] .ring::before { display: none; }
.pitem .ring .ic { position: relative; width: 12px; height: 12px; stroke-width: 3; }

/* задача из плана в полосе состояния */
.row[data-plan='1'] .mark { border-color: var(--accent); color: var(--accent); }

/* кнопка «в план» в карточке */
.planbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; border: 1px dashed var(--line); color: var(--dim);
}
.planbtn:hover { border-color: var(--accent); color: var(--accent); }
.planbtn[aria-pressed='true'] {
  border-style: solid; border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}
.planbtn .ic { width: 15px; height: 15px; }

/* шторка выбора: подпись под названием */
#planList .check span small { display: block; font-size: 12.5px; color: var(--dim); text-decoration: none; margin-top: 2px; }
/* выбранная — значит в плане, а не сделана: без зачёркивания */
#planList .check[aria-checked='true'] span { text-decoration: none; color: var(--ink); font-weight: 500; }

/* срок длинного плана рядом с названием */
.planhead > small { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan .planhead { flex-wrap: wrap; row-gap: 6px; }

/* «ещё один план» — тихая пунктирная кнопка под панелями */
.planadd {
  display: flex; align-items: center; gap: 6px; margin: -4px var(--gut) 18px; padding: 9px 12px;
  border: 1px dashed var(--line); border-radius: 10px; font-size: 13.5px; color: var(--dim); width: calc(100% - var(--gut) * 2);
}
.planadd:hover { color: var(--accent); border-color: var(--accent); }

/* настройки плана в шторке — свёрнуты, чтобы не мешать выбору задач */
.plansettings { margin-top: 20px; border-top: 1px solid var(--line2); padding-top: 4px; }
.plansettings summary {
  display: flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--dim);
}
.plansettings summary::-webkit-details-marker { display: none; }
.plansettings summary:hover { color: var(--ink); }
.plansettings[open] summary { color: var(--ink); }
.daysrow { margin-top: 8px; }
.daysrow .field { max-width: 180px; }
.daysrow .sub { margin: 0; }
.tile:disabled { opacity: .45; cursor: default; transform: none; }
.tile:disabled:hover { border-color: var(--line); }
.flat.danger { color: var(--warn); margin-top: 14px; }
.flat.danger:hover { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }