/* =====================================================================
   Daily Achievement Calendar (views/achievements.js)
   ===================================================================== */
.icon.xs { width: 12px; height: 12px; }
.icon.flip { transform: rotate(180deg); }
.ach-layout { display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.ach-layout > * { min-width: 0; }

/* ---- calendar ---- */
.ach-cal { padding: 16px; position: sticky; top: 76px; }
.ach-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ach-cal-title { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ach-cal-title b { font-size: 17px; }
.ach-cal-title span { font-size: 12px; }
.ach-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ach-wd { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.ach-cell { position: relative; aspect-ratio: 1 / 1.08; min-height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 5px 2px 7px; cursor: pointer; color: var(--ink); font: inherit; overflow: hidden;
  transition: transform .12s, box-shadow .15s, border-color .15s; }
.ach-cell.blank { border: 0; background: none; cursor: default; }
.ach-cell:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ach-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ach-dn { font-size: 13px; font-weight: 700; line-height: 1.1; }
.ach-sc { font-size: 11.5px; font-weight: 750; font-family: var(--mono, ui-monospace, monospace); line-height: 1.1; }
.ach-ct { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 1px; line-height: 1.1; }
.ach-pb { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 3px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.ach-pb i { display: block; height: 100%; background: currentColor; border-radius: 9px; }
.ach-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ach-cell.today .ach-dn { color: var(--accent); }
.ach-cell.sel { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.ach-cell.sel .ach-dn, .ach-cell.sel .ach-ct { color: #fff; }
.ach-cell.sel .ach-pb { background: rgba(255, 255, 255, .3); }
.ach-cell.future:not(.sel) .ach-dn { color: var(--muted); }
/* heat levels by achievement % */
.ach-cell.lv0 { background: var(--surface-2); }
.ach-cell.lv1 { background: color-mix(in srgb, #E5484D 13%, var(--surface)); color: #B42318; }
.ach-cell.lv2 { background: color-mix(in srgb, #F5A524 18%, var(--surface)); color: #9A5B00; }
.ach-cell.lv3 { background: color-mix(in srgb, #1D9B5A 15%, var(--surface)); color: #146C3E; }
.ach-cell.lv4 { background: color-mix(in srgb, #1D9B5A 32%, var(--surface)); color: #0D5530; }
.ach-cell[class*=lv] .ach-dn { color: var(--ink); }
.ach-cell.sel[class*=lv] { color: #fff; background: var(--accent); }
.ach-cell.sel[class*=lv] .ach-dn { color: #fff; }
:root[data-theme="dark"] .ach-cell.lv1 { color: #FF8A8A; } :root[data-theme="dark"] .ach-cell.lv2 { color: #F7C66A; }
:root[data-theme="dark"] .ach-cell.lv3, :root[data-theme="dark"] .ach-cell.lv4 { color: #6EE7A8; }
.ach-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted); justify-content: center; }
.ach-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ach-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.ach-legend .lv1 { background: color-mix(in srgb, #E5484D 30%, var(--surface)); } .ach-legend .lv2 { background: color-mix(in srgb, #F5A524 40%, var(--surface)); }
.ach-legend .lv3 { background: color-mix(in srgb, #1D9B5A 32%, var(--surface)); } .ach-legend .lv4 { background: color-mix(in srgb, #1D9B5A 60%, var(--surface)); }

/* ---- day panel ---- */
.ach-day.loading { opacity: .6; transition: opacity .2s; }
.ach-daycard { padding: 18px 20px; }
.ach-day-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ach-day-title { flex: 1; min-width: 160px; }
.ach-day-title h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.ach-day-title span { font-size: 12.5px; }
.ach-save { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; min-height: 20px; }
.ach-save.ok { color: var(--credit, #1D9B5A); } .ach-save.err { color: var(--debit, #E5484D); } .ach-save.off { color: #B08800; }
.ach-stats { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.ach-ring { --p: 0; --c: var(--accent); width: 124px; height: 124px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 8%, transparent) 0); transition: --p .6s; }
.ach-ring > div { width: 98px; height: 98px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; }
.ach-ring b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-family: var(--mono, ui-monospace, monospace); }
.ach-ring span { font-size: 11.5px; color: var(--muted); }
.ach-ring.lv1 { --c: #E5484D; } .ach-ring.lv2 { --c: #F5A524; } .ach-ring.lv3 { --c: #1D9B5A; } .ach-ring.lv4 { --c: #0F7A45; }
.ach-tiles { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ach-tiles.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 14px 0; }
.ach-tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: inherit; min-width: 0; }
.ach-tile span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ach-tile b { font-size: 19px; font-weight: 760; font-family: var(--mono, ui-monospace, monospace); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ach-tile b small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ach-tile small { font-size: 11.5px; }
.ach-tile.ok b { color: var(--credit, #1D9B5A); } .ach-tile.warn b { color: #B08800; } .ach-tile.acc b { color: var(--accent); }
.ach-tile.link { cursor: pointer; } .ach-tile.link:hover { border-color: var(--accent); }

/* task table */
.ach-tasks { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ach-tr { display: grid; grid-template-columns: minmax(130px, 1.4fr) 76px 112px max-content minmax(130px, 1fr); gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.ach-tr:first-child { border-top: 0; }
.ach-th { background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px; }
.ach-tf { background: var(--surface-2); font-size: 13.5px; }
.ach-tr .r { text-align: right; }
.ach-tr .lbl { display: none; }
.ach-tr[data-state=completed] { background: color-mix(in srgb, #1D9B5A 6%, transparent); }
.ach-tr[data-state=partial] { background: color-mix(in srgb, #F5A524 6%, transparent); }
.ach-tr.archived .ach-name b { color: var(--muted); }
.ach-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.ach-name b { font-weight: 680; overflow-wrap: anywhere; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc, var(--accent)); display: inline-block; flex: none; }
.ach-cat { font-size: 10.5px; font-weight: 750; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--tc, var(--accent)) 14%, transparent); color: var(--tc, var(--accent)); letter-spacing: .04em; }
.ach-cat.muted { background: var(--surface-2); color: var(--muted); }
.ach-note-btn { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.ach-note-btn.has { color: var(--accent); }
.ach-target { font-family: var(--mono, ui-monospace, monospace); display: flex; flex-direction: column; align-items: flex-end; }
.ach-target small { font-size: 11px; font-family: inherit; }
.ach-input { width: 100%; max-width: 120px; text-align: right; font-family: var(--mono, ui-monospace, monospace); font-size: 15px; font-weight: 650; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); }
.ach-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.ach-input.invalid { border-color: var(--debit, #E5484D); box-shadow: 0 0 0 3px color-mix(in srgb, #E5484D 18%, transparent); }
.ach-status { flex-wrap: nowrap; }
.ach-status button { padding: 5px 9px; font-size: 12.5px; white-space: nowrap; }
.ach-status button[data-st=completed].on { color: var(--credit, #1D9B5A); }
.ach-status button[data-st=partial].on { color: #B08800; }
.ach-prog { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ach-prog b { font-size: 12.5px; font-family: var(--mono, ui-monospace, monospace); min-width: 62px; text-align: right; white-space: nowrap; }
.ach-bar { min-width: 40px; }
.ach-bar { flex: 1; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.ach-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .4s var(--ease, ease); }
.ach-bar i.lv1 { background: #E5484D; } .ach-bar i.lv2 { background: #F5A524; } .ach-bar i.lv3 { background: #1D9B5A; } .ach-bar i.lv4 { background: #0F7A45; }
.ach-err { grid-column: 1 / -1; color: var(--debit, #E5484D); font-size: 12.5px; margin-top: -4px; }
.ach-err[hidden], .ach-note[hidden] { display: none; }
.ach-note { grid-column: 1 / -1; }
.ach-note .input { width: 100%; }
.ach-hint { font-size: 12.5px; margin: 10px 2px 0; }

/* ---- summary ---- */
.ach-summary { padding: 18px 20px; }
.ach-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ach-sum-head h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.ach-chart { position: relative; height: 280px; margin: 6px 0 16px; }
.ach-empty { padding: 20px 0; text-align: center; }
.ach-bytask td { white-space: nowrap; }
.ach-bytask .dot { vertical-align: middle; margin-right: 4px; }

/* ---- manage tasks ---- */
.ach-mt { display: grid; gap: 8px; margin-bottom: 14px; }
.ach-mt-row { display: grid; grid-template-columns: 76px minmax(0, 1.6fr) 110px 100px 100px 40px; gap: 8px; align-items: center; }
.ach-mt-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ach-mt-move { display: flex; gap: 4px; }
.ach-mt-move .icon-btn, .ach-mt-row > .icon-btn { width: 34px; height: 34px; }
.ach-mt-row .input, .ach-mt-row select { width: 100%; min-width: 0; }
.ach-mt-row .icon-btn.danger { color: var(--debit, #E5484D); }
.ach-mt-arch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }

/* ---- tablets and phones ---- */
@media (max-width: 1700px) and (min-width: 761px) {
  .ach-tr { grid-template-columns: minmax(120px, 1fr) 70px 104px max-content; }
  .ach-tr > .ach-prog { grid-column: 2 / -1; }
  .ach-th > span:last-child { display: none; }
}
@media (max-width: 1100px) {
  .ach-layout { grid-template-columns: 1fr; }
  .ach-cal { position: static; max-width: 560px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .ach-daycard, .ach-summary { padding: 14px; }
  .ach-ring { width: 104px; height: 104px; } .ach-ring > div { width: 82px; height: 82px; } .ach-ring b { font-size: 16px; }
  .ach-stats { gap: 12px; }
  .ach-stats { flex-direction: column; align-items: stretch; }
  .ach-ring { align-self: center; }
  .ach-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ach-tile { padding: 8px 9px; }
  .ach-tile span { font-size: 11px; }
  .ach-tiles.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ach-tile b { font-size: 16px; }
  .ach-tiles.wide .ach-tile b { font-size: 17px; }
  .ach-th { display: none; }
  .ach-tr { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; }
  .ach-tr .ach-name { grid-column: 1 / -1; }
  .ach-tr .lbl { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: left; margin-bottom: 3px; }
  .ach-target { align-items: flex-start; justify-content: center; }
  .ach-tr .r { text-align: left; }
  .ach-input { max-width: none; font-size: 16px; }
  .ach-tr > span[role=cell]:nth-child(4), .ach-tr > span[role=cell]:nth-child(5) { grid-column: 1 / -1; }
  .ach-status { display: flex; width: 100%; } .ach-status button { flex: 1; padding: 9px 6px; }
  .ach-tf { grid-template-columns: 1fr 1fr; }
  .ach-tf > span:first-child, .ach-tf > .ach-prog { grid-column: 1 / -1; }
  .ach-tf > span:nth-child(4) { display: none; }
  .ach-tf .r::before { content: attr(data-l); }
  .ach-cell { min-height: 40px; border-radius: 9px; padding-top: 4px; }
  .ach-sc { font-size: 10.5px; } .ach-ct { display: none; }
  .ach-chart { height: 230px; }
  .ach-mt-row { grid-template-columns: 1fr 1fr 40px; }
  .ach-mt-head { display: none; }
  .ach-mt-row .ach-mt-move { grid-column: 1 / -1; order: 9; }
  .ach-mt-row [data-f=name] { grid-column: 1 / 3; }
}
@media (max-width: 380px) { .ach-sc { display: none; } }