*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#eef1f4; --card:#fff; --line:#dde3e9; --txt:#1b2430; --sub:#67737f;
  --navy:#1d3557; --navy-dk:#16283f; --amber:#c2701a; --amber-bg:#fdf3e4;
  --ok:#1d6b48; --ok-bg:#e6f2ec; --ng:#a8342a; --ng-bg:#fbeceb;
  --hd:112px;              /* ヘッダーの高さ（JSで実寸に合わせる） */
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif}
body{font-size:15px;line-height:1.55;padding-bottom:40px}
a{color:#1c5aa6}

/* ---------- ヘッダー ---------- */
header{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
header h1{margin:0 0 7px;font-size:16px;font-weight:700;display:flex;align-items:baseline;gap:8px}
.upd{font-size:11px;font-weight:400;opacity:.75;margin-left:auto}
.bar{display:flex;gap:6px}
/* 入力欄は16px未満にしない（iOSがタップのたびに勝手に拡大する） */
.bar input{flex:1;min-width:0;padding:9px 11px;border:0;border-radius:9px;font-size:16px;
  font-family:inherit;background:#fff}
.ico{flex:0 0 40px;width:40px;border:0;border-radius:9px;background:rgba(255,255,255,.16);
  color:#fff;font-size:19px;cursor:pointer;font-family:inherit}
.ico:active{background:rgba(255,255,255,.3)}

.segs{display:flex;gap:6px;margin-top:8px}
.segs button{flex:1;border:0;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;
  padding:8px 4px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.segs button.on{background:#fff;color:var(--navy)}
.segs button i{font-style:normal;font-weight:400;font-size:11px;opacity:.8;margin-left:4px}

.chips{display:flex;gap:6px;margin-top:7px;overflow-x:auto;padding-bottom:1px}
.chips button{flex:0 0 auto;border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;border-radius:999px;padding:4px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.chips button.on{background:#fff;color:var(--navy);border-color:#fff;font-weight:700}
.chips button i{font-style:normal;font-size:11px;opacity:.75;margin-left:5px}
/* 同行者が誰も決まっていないときの説明。空振りに見えるのを防ぐ */
.hint{background:#fff6e6;border:1px solid #f0dcc0;color:#8a5a17;border-radius:9px;
  padding:8px 11px;font-size:12.5px;line-height:1.7;margin:0 0 10px}

/* ---------- 一覧 ---------- */
main{padding:10px 12px}
.empty{text-align:center;color:var(--sub);padding:50px 16px;line-height:1.9}
.empty b{display:block;color:var(--txt);font-size:15px;margin-bottom:6px}

.day{position:sticky;top:var(--hd);z-index:10;margin:14px 0 7px;
  background:var(--bg);padding:4px 2px 5px;
  font-size:13px;font-weight:700;color:var(--navy);
  border-bottom:2px solid var(--navy);display:flex;align-items:baseline;gap:8px}
.day:first-child{margin-top:0}
.day.today{color:var(--amber);border-color:var(--amber)}
.day span{font-weight:400;font-size:11.5px;color:var(--sub);margin-left:auto}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;margin-bottom:8px}
.card.today{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.hd{display:flex;align-items:baseline;gap:9px}
.tm{flex:0 0 auto;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy)}
.card.today .tm{color:var(--amber)}
.nm{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.4}
.who{flex:0 0 auto;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;
  background:var(--navy);color:#fff}
.who.f{background:#7a4ea8}
.who.n{background:var(--amber)}
.sub{font-size:12.5px;color:var(--sub);margin-top:2px}
.sub b{color:var(--txt);font-weight:600}

.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag{font-size:11.5px;border-radius:6px;padding:2px 8px;background:#eef2f6;color:#42536b;
  border:1px solid #e0e7ee}
.tag.s0{background:var(--ng-bg);color:var(--ng);border-color:#f0d6d3}
.tag.s9{background:var(--ok-bg);color:var(--ok);border-color:#cfe4d9}
.tag.s4{background:#eaf1fb;color:#1c5aa6;border-color:#d6e3f6}
.tag.new{background:var(--amber-bg);color:var(--amber);border-color:#f0dcc0;font-weight:700}

.acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.acts a,.acts button{flex:1 1 auto;text-align:center;text-decoration:none;
  border:1px solid var(--line);background:#fafbfc;border-radius:9px;padding:9px 6px;
  font-size:13px;color:var(--txt);cursor:pointer;font-family:inherit;min-width:74px}
.acts a:active,.acts button:active{background:#eef2f6}
.acts .p{background:var(--navy);border-color:var(--navy);color:#fff}

.more{margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}
.more[hidden]{display:none}
.sec{margin-bottom:9px}
.sec:last-child{margin-bottom:0}
.sec h4{margin:0 0 2px;font-size:11.5px;color:var(--sub);font-weight:700;letter-spacing:.02em}
.sec p{margin:0;white-space:pre-wrap;font-size:13.5px;line-height:1.75}
.sec.na{background:var(--amber-bg);border:1px solid #f0dcc0;border-radius:8px;padding:7px 9px}
.sec.na h4{color:var(--amber)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;
  padding:10px 16px;border-radius:999px;font-size:13px;z-index:60;opacity:0;transition:.2s;
  pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1}

.foot{color:var(--sub);font-size:11.5px;text-align:center;padding:22px 10px 6px;line-height:1.9}