/* 日本 2027 — checklist met vinkjes (jp27-check.js). Own classes: .check__*, .checkhead, .checkprog*;
   overrides only the core's .check li grid for enhanced rows. Spec: reports/design.md §9d + DESIGN.md "Checklist". */

/* ---------- progress head ---------- */
.checkhead{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;
  padding-bottom:18px;border-bottom:1px solid var(--ink-30,rgba(20,16,14,.32));
}
.checkprog__n{
  display:flex;align-items:center;gap:.3em;
  font:600 26px/1.15 var(--mincho,serif);letter-spacing:-.005em;color:var(--sumi,#14100e);
}
.checkprog__n b{font-weight:600;color:var(--shu,#a83e26);font-variant-numeric:tabular-nums}
.checkprog__n.is-done{gap:14px}
.checkprog__stamp{
  display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;box-sizing:border-box;
  border:2.5px solid var(--shu,#a83e26);border-radius:4px;color:var(--shu,#a83e26);
  font:700 25px/1 var(--mincho,serif);transform:rotate(-8deg);opacity:.92;
}
.checkprog__cells{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.checkprog__cells i{
  width:13px;height:13px;box-sizing:border-box;border:1.5px solid var(--ink-30,rgba(20,16,14,.32));border-radius:2px;
  transition:background-color .15s ease,border-color .15s ease;
}
.checkprog__cells i.on{background:var(--shu,#a83e26);border-color:var(--shu,#a83e26)}
.checkprog__side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;max-width:100%}
.checkprog__note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-55,rgba(20,16,14,.62))}
.checkprog__act{display:flex;align-items:center;min-height:32px}
.checkprog__clear,.checkprog__undobtn{
  min-height:32px;padding:0;border:0;background:none;cursor:pointer;
  font:600 12.5px/1.2 var(--sans,'Inter',system-ui,sans-serif);color:var(--ink-70,rgba(20,16,14,.72));
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-30,rgba(20,16,14,.32));
  transition:color .15s ease,text-decoration-color .15s ease;
}
.checkprog__clear[hidden],.checkprog__undo[hidden]{display:none}
.checkprog__undo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sumi-2,#332b26)}
.checkprog__undobtn{color:var(--shu,#a83e26);text-decoration-color:currentColor}
@media (hover:hover){
  .checkprog__clear:hover{color:var(--shu,#a83e26);text-decoration-color:currentColor}
  .checkprog__undobtn:hover{color:var(--shu-deep,#8f3320)}
}
.checkprog__clear:focus-visible,.checkprog__undobtn:focus-visible{outline:2px solid var(--shu,#a83e26);outline-offset:2px}
@media (pointer:coarse){.checkprog__act,.checkprog__clear,.checkprog__undobtn{min-height:44px}}
@media (max-width:640px){
  .checkhead{align-items:flex-start;flex-direction:column;gap:10px}
  .checkprog__side{align-items:flex-start;text-align:left}
}

/* ---------- rows: the whole label is the target ---------- */
.check li.check__item{display:block;position:relative;padding:0;border-bottom:1px solid var(--ink-14,rgba(20,16,14,.14))}
.check li.check__item:last-child{border-bottom:0}
.check__in{position:absolute;top:18px;left:0;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.check .check__row{
  display:grid;grid-template-columns:112px 24px minmax(0,1fr) 40px;gap:0 16px;align-items:start;
  min-height:44px;padding:16px 0;cursor:pointer;-webkit-tap-highlight-color:rgba(168,62,38,.08);
}
.check .check__row .box{
  display:grid;place-items:center;width:22px;height:22px;margin-top:3px;box-sizing:border-box;
  border:1.5px solid var(--ink-55,rgba(20,16,14,.62));border-radius:3px;background:transparent;color:#fff;
  transition:background-color .15s ease,border-color .15s ease;
}
.check .check__row .box svg{width:14px;height:14px;opacity:0}
.check .check__row .what > b{margin-bottom:4px}
/* inline emphasis in a description stays inline Inter (the core's .what b also catches these) */
.check .check__row .what span b{display:inline;margin:0;font-family:inherit;font-size:inherit;font-weight:600;color:var(--sumi,#14100e)}
.check__late{display:block;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--shu,#a83e26)}
.check__stamp{
  visibility:hidden;align-self:center;justify-self:end;display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;
  border:2px solid var(--shu,#a83e26);border-radius:4px;color:var(--shu,#a83e26);
  font:700 17px/1 var(--mincho,serif);transform:rotate(-8deg);opacity:.9;
}
@media (hover:hover){.check .check__row:hover .box{border-color:var(--shu,#a83e26)}}
.check .check__row:active .box{transform:translateY(1px)}

/* states */
.check__in:focus-visible + .check__row .box{outline:2px solid var(--shu,#a83e26);outline-offset:2px}
.check__in:checked + .check__row .box{background:var(--shu,#a83e26);border-color:var(--shu,#a83e26)}
.check__in:checked + .check__row .box svg{opacity:1}
.check__in:checked + .check__row .what > b{
  color:var(--ink-70,rgba(20,16,14,.72));text-decoration:line-through;text-decoration-color:rgba(168,62,38,.65);
  text-decoration-thickness:1.5px;
}
.check__in:checked + .check__row .what span{color:var(--ink-55,rgba(20,16,14,.62))}
.check__in:checked + .check__row .what span b{color:var(--ink-70,rgba(20,16,14,.72))}
.check__in:checked + .check__row .check__stamp{visibility:visible}
.check__item--stamp .check__in:checked + .check__row .check__stamp{animation:check-stamp .22s cubic-bezier(.2,.7,.3,1)}
@keyframes check-stamp{
  from{transform:scale(1.5) rotate(-16deg);opacity:0}
  to{transform:scale(1) rotate(-8deg);opacity:.9}
}

@media (max-width:640px){
  .check .check__row{grid-template-columns:24px minmax(0,1fr) 34px;gap:0 12px}
  .check .check__row .when{grid-column:1/-1;padding:0 0 6px}
  .check__late{display:inline;margin:0 0 0 8px}
  .check__in{top:44px}
}
@media (prefers-reduced-motion:reduce){
  .check__item--stamp .check__in:checked + .check__row .check__stamp{animation:none}
  .check .check__row .box,.checkprog__cells i{transition:none}
}
@media print{
  .checkprog__act{display:none}
  .check__stamp{visibility:hidden}
  .check__in:checked + .check__row .check__stamp{visibility:visible}
}