/* タスクボード — 机の上に付箋を「いつやるか」の7列で並べる。PCは横7列、スマホは縦に並べて開閉する。 */
:root{
  --bg:#E4E9EE; --trough:#EEF2F5; --panel:#FFFFFF; --fg:#1B2530; --muted:#566473; --line:#C6CFD8;
  --accent:#1D4F91; --accent-fg:#FFFFFF; --accent-soft:#D6E4F5;
  --over-ink:#9A3D00;
  --n-white:#FFFFFF; --n-blue:#D3E6FB; --n-yellow:#FFEE9E; --n-red:#FFD0D0;
  --n-green:#D2EFCF; --n-purple:#E4DAF8; --n-orange:#FFC78A;
  --note-edge:rgba(27,37,48,.16); --note-shadow:0 1px 1.5px rgba(27,37,48,.18);
  --lift-shadow:0 8px 20px rgba(27,37,48,.28);
  --scrim:rgba(15,22,30,.45);
  --font-ui:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  --font-num:"Barlow Semi Condensed","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#11151A; --trough:#191F26; --panel:#222A33; --fg:#E7ECF1; --muted:#9BA7B3; --line:#34404C;
    --accent:#86B6F2; --accent-fg:#0D1B2E; --accent-soft:#1B2C44;
    --over-ink:#FFB877;
    --n-white:#2A323C; --n-blue:#1E3B5A; --n-yellow:#554A16; --n-red:#5C2731;
    --n-green:#1F4429; --n-purple:#3B3060; --n-orange:#6E4010;
    --note-edge:rgba(255,255,255,.12); --note-shadow:0 1px 2px rgba(0,0,0,.5);
    --lift-shadow:0 8px 20px rgba(0,0,0,.6);
    --scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
}
button,input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

[data-color="white"]{--n:var(--n-white)}
[data-color="blue"]{--n:var(--n-blue)}
[data-color="yellow"]{--n:var(--n-yellow)}
[data-color="red"]{--n:var(--n-red)}
[data-color="green"]{--n:var(--n-green)}
[data-color="purple"]{--n:var(--n-purple)}
[data-color="orange"]{--n:var(--n-orange)}

/* ---------- header ---------- */
.top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:14px}
.brand{margin:0; font-size:18px; font-weight:700; letter-spacing:.02em}
.seg{display:inline-flex; background:var(--trough); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg button{border:0; background:transparent; color:var(--muted); border-radius:999px; padding:6px 16px; font-size:14px; font-weight:500; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg); font-weight:700}
.seg .n{font-family:var(--font-num); font-size:13px; margin-left:4px; opacity:.85}
.top-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.date-now{font-family:var(--font-num); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.status{font-size:12px; color:var(--muted); white-space:nowrap}
.status.warn{color:var(--over-ink); font-weight:700}
.hint-line{margin:0 0 12px; color:var(--muted); font-size:12px}

.btn{border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:6px; padding:7px 12px; font-size:14px; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.5; cursor:default}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:700}
.btn.danger{color:var(--over-ink)}
.btn.sm{padding:4px 9px; font-size:12px}

/* ---------- board ---------- */
.board{display:grid; gap:10px}
.col{background:var(--trough); border-radius:6px; min-width:0; display:flex; flex-direction:column}
.col[data-col="today"]{background:var(--accent-soft)}
.col-head{
  display:grid; grid-template-columns:1fr auto auto; grid-template-areas:"name cnt chev" "sub sub sub";
  align-items:baseline; column-gap:8px; width:100%; text-align:left;
  border:0; background:transparent; color:inherit; padding:9px 10px 6px; cursor:default; border-radius:6px;
}
.col-name{grid-area:name; font-size:15px; font-weight:700}
.col[data-col="today"] .col-name{color:var(--accent)}
.col-sub{grid-area:sub; font-family:var(--font-num); font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.col-cnt{grid-area:cnt; font-family:var(--font-num); font-size:14px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.chev{grid-area:chev; display:none; width:8px; height:8px; border:solid var(--muted); border-width:0 2px 2px 0; transform:rotate(45deg); align-self:center; margin:0 4px 3px 2px}
.add{padding:0 8px 6px; margin:0}
.add-in{
  width:100%; border:1px dashed var(--line); background:transparent; color:var(--fg);
  border-radius:4px; padding:6px 8px; font-size:14px;
}
.add-in::placeholder{color:var(--muted)}
.add-in:focus{border-style:solid; border-color:var(--accent); background:var(--panel); outline:none}
.list{display:flex; flex-direction:column; gap:6px; padding:2px 8px 10px; min-height:48px; flex:1}
.list:empty::before{content:"なし"; color:var(--muted); font-size:12px; padding:8px 2px}

.card{
  display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:start;
  background:var(--n, var(--n-white)); color:var(--fg);
  border:1px solid var(--note-edge); border-radius:3px; box-shadow:var(--note-shadow);
  padding:8px 9px 8px 8px; cursor:grab;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.card:hover{border-color:var(--muted)}
.check{
  position:relative; width:20px; height:20px; margin-top:1px; padding:0; flex:none;
  border:1.5px solid var(--fg); border-radius:50%; background:transparent; color:var(--fg);
  opacity:.5; cursor:pointer;
}
.check::after{content:""; position:absolute; inset:-9px}
.check::before{content:""; position:absolute; left:5.5px; top:2px; width:5px; height:9px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0}
.check:hover,.check:focus-visible{opacity:1}
.check:hover::before,.check:focus-visible::before{opacity:1}
.card-body{min-width:0}
.card-title{font-size:14px; font-weight:500; line-height:1.45; overflow-wrap:anywhere}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; margin-top:4px; font-family:var(--font-num); font-size:13px; font-variant-numeric:tabular-nums; opacity:.9}
.meta .over{color:var(--over-ink); font-weight:700; font-family:var(--font-ui); font-size:12px}
.meta .pri{font-family:var(--font-ui); font-size:11px; font-weight:700; border:1px solid currentColor; border-radius:3px; padding:0 4px; line-height:1.5}
.meta .ic{display:inline-flex; align-items:center; gap:3px}
.meta svg{width:13px; height:13px; display:block}
.card.ghost{opacity:.3}
.sortable-fallback{box-shadow:var(--lift-shadow); cursor:grabbing}

@media (min-width:760px){
  .board{grid-auto-flow:column; grid-auto-columns:minmax(164px,1fr); overflow-x:auto; min-height:440px; padding-bottom:8px}
}
@media (max-width:759px){
  .top-right{margin-left:0; width:100%; justify-content:flex-end}
  .date-now{margin-right:auto}
  .col-head{cursor:pointer; grid-template-areas:"name sub cnt chev"; grid-template-columns:auto 1fr auto auto; padding:11px 12px}
  .chev{display:block}
  .col.collapsed .chev{transform:rotate(-45deg); margin-bottom:0}
  .col.collapsed .list,.col.collapsed .add{display:none}
  .add-in{font-size:16px; padding:8px 10px}
  .card{padding:10px 10px 10px 9px}
  .card-title{font-size:15px}
  .list{min-height:40px}
}

/* ---------- history ---------- */
.hist{max-width:720px; display:grid; gap:18px}
.hist h2{margin:0 0 6px; font-family:var(--font-num); font-size:16px; font-weight:600; display:flex; align-items:baseline; gap:10px; font-variant-numeric:tabular-nums}
.hist h2 span{font-size:13px; color:var(--muted); font-weight:500}
.hist ul{list-style:none; margin:0; padding:0; background:var(--trough); border-radius:6px}
.hist li{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-top:1px solid var(--line)}
.hist li:first-child{border-top:0}
.hist .dot{width:12px; height:12px; border-radius:2px; background:var(--n); border:1px solid var(--note-edge)}
.hist .ht{min-width:0; overflow-wrap:anywhere}
.hist-empty{color:var(--muted); margin:0}

/* ---------- dialogs ---------- */
dialog.sheet{
  border:1px solid var(--line); border-radius:10px; padding:0; background:var(--panel); color:var(--fg);
  width:min(520px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:hidden;
}
dialog.sheet[open]{display:flex}
dialog.sheet::backdrop{background:var(--scrim)}
.ed{display:flex; flex-direction:column; min-height:0; width:100%}
.ed-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line)}
.ed-top h2{margin:0; font-size:15px}
.ed-body{overflow-y:auto; padding:4px 16px 16px; display:grid; gap:6px}
.fl{font-size:12px; font-weight:700; color:var(--muted); margin-top:12px; letter-spacing:.04em}
.in{width:100%; border:1px solid var(--line); background:var(--bg); color:var(--fg); border-radius:6px; padding:8px 10px; font-size:16px}
textarea.in{min-height:72px; resize:vertical; line-height:1.5}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:transparent; color:var(--fg); border-radius:999px; padding:6px 12px; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:700}
.chip .dot{width:11px; height:11px; border-radius:2px; background:var(--n); border:1px solid var(--note-edge)}
.pick{display:grid; gap:8px; margin-top:4px}
.ckl{display:flex; align-items:center; gap:8px; font-size:14px}
.hint{margin:2px 0 0; font-size:12px; color:var(--muted)}
.sws{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sw{width:34px; height:34px; border-radius:4px; border:1px solid var(--note-edge); background:var(--n); color:var(--fg); cursor:pointer; padding:0; font-size:12px; font-weight:700}
.sw.auto{width:auto; padding:0 10px}
.sw[aria-pressed="true"]{outline:2px solid var(--accent); outline-offset:2px}
#ed-checks{list-style:none; margin:0; padding:0; display:grid; gap:6px}
#ed-checks li{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center}
#ed-checks input[type="checkbox"],.ckl input{width:18px; height:18px; flex:none}
.ck-add{display:grid; grid-template-columns:1fr auto; gap:8px; margin:6px 0 0}
.ed-foot{display:flex; justify-content:space-between; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line)}
.stack{display:grid; gap:8px; margin:0}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.msg{margin:0; font-size:13px; color:var(--over-ink); font-weight:700; min-height:1.5em}
.msg.ok{color:var(--accent)}
@media (max-width:759px){
  dialog.sheet{width:100%; max-width:100%; max-height:92%; margin:auto 0 0; border-radius:14px 14px 0 0; border-width:1px 0 0}
}

/* ---------- login ---------- */
.auth{max-width:380px; margin:8vh auto 0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px 20px 20px}
.auth h1{margin:0 0 4px; font-size:20px}
.auth p{margin:0 0 6px; color:var(--muted); font-size:13px}
.auth .btn.primary{padding:10px 12px; font-size:15px; margin-top:6px}
.auth code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:var(--trough); padding:1px 4px; border-radius:3px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:var(--fg); color:var(--bg); border-radius:8px; padding:9px 12px 9px 14px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--lift-shadow); max-width:calc(100% - 32px); z-index:20;
}
.toast button{border:1px solid currentColor; background:transparent; color:inherit; border-radius:5px; padding:3px 9px; font-size:13px; cursor:pointer; white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .card{transition:border-color .12s}
}