:root {
  --bg: #141110;
  --panel: #1e1a19;
  --line: #322c2a;
  --text: #ece7e4;
  --dim: #9a908b;
  --accent: #e8a04a;
  --ok: #6fc08a;
  --err: #e06b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

header {
  padding: 20px 20px 0;
}

h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--accent);
}

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

h2 { font-size: 17px; margin: 8px 0 4px; }
h3 { font-size: 15px; margin: 0 0 4px; }

.lead {
  color: var(--dim);
  font-size: 13px;
  margin: 4px 0 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin: 16px 0;
}

label {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin: 12px 0 4px;
}

input {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;           /* iOS で拡大されないように 16px 以上 */
  color: var(--text);
  background: #141110;
  border: 1px solid var(--line);
  border-radius: 8px;
}

input:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1413;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:disabled { opacity: .5; }

button.ghost {
  margin-top: 32px;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  font-weight: 400;
}

.members {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.members li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.invite { text-align: center; }

.invite .label {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
}

.code {
  margin: 6px 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;         /* letter-spacing の分を中央に戻す */
  color: var(--accent);
}

.msg {
  font-size: 13px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.msg.ok  { color: var(--ok);  border-color: #2f4d3a; }
.msg.err { color: var(--err); border-color: #532f2f; }

.toggle-wrap { text-align: center; margin: 4px 0 0; }

button.linkish {
  width: auto;
  margin: 0;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--dim);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.next ol {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--dim);
}

.next li { margin-bottom: 10px; }

.next li b {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* 「新規登録」が押せないボタンに見えていたので、輪郭と文字をはっきりさせる。
   ログアウト（.ghost）とは別扱いにする。 */
button.outline {
  margin-top: 12px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
}

/* 画面から消えてしまう文字を、あとから読めるように残しておく場所 */
#logbox {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#logbox h3 { color: var(--dim); font-size: 13px; }

#log {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

/* ---------- タブ ---------- */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tab {
  width: auto;
  flex: 1;
  margin: 0;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.tab.on {
  color: #1a1413;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- カレンダー ---------- */
.cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.cal-bar .nav {
  width: 40px;
  margin: 0;
  padding: 4px 0;
  font-size: 20px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-head {
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  padding-bottom: 4px;
}

.cal-day {
  width: auto;
  margin: 0;
  padding: 6px 0 4px;
  min-height: 46px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cal-day.today { color: var(--accent); font-weight: 700; }
.cal-day.selected { border-color: var(--accent); }

.cal-day .dots { display: flex; gap: 3px; min-height: 6px; }

.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.cal-dot.mine   { background: #4a7fe8; }
.cal-dot.theirs { background: #e8a04a; }

.cal-legend {
  margin: 10px 0 4px;
  font-size: 11px;
  color: var(--dim);
  text-align: right;
}

.cal-legend .cal-dot { margin-right: 3px; }

/* ---------- その日の一覧 ---------- */
.day-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.day-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.day-list li.mine   { border-left-color: #4a7fe8; }
.day-list li.theirs { border-left-color: #e8a04a; }
.day-list li.empty  { color: var(--dim); border-left-color: var(--line); }

.day-list .time { color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.day-list .title { flex: 1; }
.day-list .title.masked { color: var(--dim); font-style: italic; }

.day-list .kind {
  font-size: 11px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  flex: none;
}

.day-list .del {
  width: auto;
  margin: 0;
  padding: 0 4px;
  font-size: 16px;
  color: var(--dim);
  background: none;
  border: none;
  flex: none;
}

/* ---------- 予定の追加 ---------- */
/* display:flex は hidden 属性より強いので、明示的に打ち消す */
.dialog[hidden] { display: none; }

.dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow-y: auto;
  z-index: 10;
}

.dialog-card {
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 32px;
}

.dialog-card h3 { margin-bottom: 8px; }

select {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;
  color: var(--text);
  background: #141110;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  margin-top: 16px;
}

.check input { width: auto; }

.row { display: flex; gap: 12px; }
.row > div { flex: 1; }

/* 予定の重さ。非公開でも相手に見える唯一の手がかりなので、色を分ける */
.day-list .weight {
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 8px;
  flex: none;
}

/* 読み取れない時刻を入れたときに、その場で気づけるようにする */
input.bad { border-color: var(--err); }

.day-list .weight.heavy {
  color: #e88a8a;
  border: 1px solid #533;
}

.day-list .weight.light {
  color: var(--dim);
  border: 1px solid var(--line);
}

/* ---------- 下タブ（スマホ）/ 左サイド（PC） ---------- */
/* 隠れた画面は忘れられるので、常に5つとも見えている形にする */
#tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: rgba(20, 17, 16, .96);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 5;
}

.tabbtn {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 8px 0 6px;
  font-size: 18px;
  font-weight: 400;
  color: var(--dim);
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tabbtn span { font-size: 10px; }
.tabbtn.on { color: var(--accent); }

main { padding-bottom: 84px; }

@media (min-width: 768px) {
  #tabbar {
    top: 0; right: auto; bottom: 0;
    width: 168px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding-top: 72px;
    border-top: none;
    border-right: 1px solid var(--line);
  }
  .tabbtn { flex: none; flex-direction: row; gap: 10px; padding: 12px 20px; }
  .tabbtn span { font-size: 13px; }

  /* 左メニューは position:fixed で浮いているので、その幅ぶんを body で空ける。
     以前は header/main に margin-left を付けていたが、それだと main の
     「margin: 0 auto」による中央揃えが打ち消され、内容が左に寄っていた。 */
  body { padding-left: 168px; }
  header, main { margin-left: 0; margin-right: 0; }
  main {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 48px;
  }
  header { max-width: 780px; margin: 0 auto; }
}

/* 画面が広いときは、カードを2列に並べて余白を活かす */
@media (min-width: 1100px) {
  body { padding-left: 168px; }
  main, header { max-width: 1040px; }
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .two-col > * { margin-bottom: 0; }
}

/* ---------- ホーム ---------- */
.balances { display: flex; gap: 8px; margin: 8px 0 20px; }

/* 名前と状態を横に並べると、狭い画面で名前が折り返す。
   名前を上、状態を下にして、どちらも1行で収まるようにする。 */
.bal {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
}

.bal .dot { grid-row: 1; }
.bal b { grid-row: 1; font-size: 13px; }
.bal span:last-child {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--dim);
  font-size: 12px;
}
.bal.good { border-left-color: var(--ok); }
.bal.ok   { border-left-color: var(--line); }
.bal.warn { border-left-color: var(--accent); }
.bal.bad  { border-left-color: var(--err); }

.alert { border-color: #533; }

/* ---------- みちのり ---------- */
.stack > * { margin-bottom: 10px; }

.venture { padding: 14px; }
.venture.stale { opacity: .55; }

.v-head { display: flex; align-items: center; gap: 8px; }
.v-head b { flex: 1; font-size: 15px; }
.v-stage { width: auto; padding: 5px 8px; font-size: 12px; }

.v-next { margin-top: 10px; }
.v-next input { font-size: 14px; padding: 8px 10px; }
/* 次の一手が空＝止まっているサイン */
.v-next.empty input { border-color: #6b3a3a; }
.v-next.empty .lead { color: #e88a8a; }

.foot { display: flex; align-items: center; margin: 10px 0 0; font-size: 11px; }
.foot .del { margin-left: auto; }

.wish { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.wish span { flex: 1; }

.inline { display: flex; gap: 8px; margin-bottom: 16px; }
.inline input { flex: 1; }
.inline button { width: auto; margin: 0; padding: 0 18px; flex: none; }

/* ---------- ととのう ---------- */
.big { font-size: 22px; font-weight: 700; margin: 4px 0 0; }
.big.good { color: var(--ok); }
.big.ok   { color: var(--text); }
.big.warn { color: var(--accent); }
.big.bad  { color: var(--err); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }

.chip {
  width: auto;
  margin: 0;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  user-select: none;
  -webkit-user-select: none;
}

.chip.on {
  color: #1a1413;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.auto { margin-top: 8px; }

.auto-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
}

.auto-row b { color: var(--text); }

/* 削除ボタンは、どの画面でも小さな × に統一する
   （指定が .day-list の中だけだったため、他の画面で大きな橙ボタンになっていた） */
.del {
  width: auto !important;
  margin: 0 !important;
  padding: 0 6px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--dim) !important;
  background: none !important;
  border: none !important;
  flex: none;
}

/* ---------- 今日のタイムライン ---------- */
/* 予定だけを並べると詰まって見える。時間の帯の上に置いて、
   空いている時間が「空いている」と見えるようにする。 */
.timeline { margin: 8px 0 4px; }

.tl-grid {
  position: relative;
  margin-left: 34px;
  border-left: 1px solid var(--line);
}

.tl-hour {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid var(--line);
}

.tl-hour span {
  position: absolute;
  left: -34px;
  top: -8px;
  width: 28px;
  text-align: right;
  font-size: 11px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.tl-ev {
  position: absolute;
  left: 6px;
  right: 0;
  padding: 3px 8px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}

.tl-ev.mine   { border-left-color: #4a7fe8; }
.tl-ev.theirs { border-left-color: #e8a04a; }

.tl-ev b { display: block; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ev span { font-size: 11px; color: var(--dim); }
.tl-ev.masked b { color: var(--dim); font-style: italic; font-weight: 400; }

/* いまの時刻 */
.tl-now {
  position: absolute;
  left: -3px; right: 0;
  height: 0;
  border-top: 1px solid var(--err);
  z-index: 2;
}

.tl-now::before {
  content: "";
  position: absolute;
  left: -3px; top: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--err);
}

.tl-allday {
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
}

.tl-allday.mine   { border-left-color: #4a7fe8; }
.tl-allday.theirs { border-left-color: #e8a04a; }

#home-goal { font-size: 15px; }

/* ---------- 誰の予定を見るか ---------- */
.segmented {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.seg {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.seg.on {
  color: #1a1413;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- 予定を登録する欄 ---------- */
.addbox { padding: 16px; }
.addbox label:first-child { margin-top: 0; }

.row.tight { gap: 8px; align-items: flex-end; }
.row.tight select { flex: 1; }

button.mini {
  width: auto;
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  flex: none;
}

#ev-quick { margin-top: 10px; }
#ev-quick .chip { padding: 7px 12px; font-size: 12px; }


/* ---------- 道しるべ ---------- */
.v-purpose { margin-top: 10px; }

.v-purpose textarea {
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: #141110;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
}

.v-purpose textarea:focus { outline: none; border-color: var(--accent); }

.ms-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ms-head-label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim);
}

.ms {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.ms:last-of-type { border-bottom: none; }
.ms.done { opacity: .5; }
.ms.done .ms-title { text-decoration: line-through; }

.ms-head { display: flex; align-items: center; gap: 8px; }
.ms-head input[type="checkbox"] { width: auto; flex: none; }
.ms-title { flex: 1; font-size: 13.5px; }

.ms-due {
  font-size: 11px;
  color: var(--dim);
  flex: none;
  white-space: nowrap;
}

.ms-due.soon { color: var(--accent); }
.ms-due.over { color: var(--err); }

/* 事業ぜんたいの進捗率は出さないが、金額・人数は本人が決めた分母があるので出す */
.ms-bar {
  height: 5px;
  margin: 7px 0 5px;
  background: #141110;
  border-radius: 999px;
  overflow: hidden;
}

.ms-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.ms-num {
  font-size: 11.5px;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ms-cur {
  width: 90px;
  padding: 4px 6px;
  font-size: 12px;
  text-align: right;
}

button.ghost.small {
  margin-top: 12px;
  padding: 8px;
  font-size: 12.5px;
}

/* 見出しの右に小さなトグルを置く */
.h-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.h-row .linkish { padding: 0; }

/* 保存されたことを目に見える形で返す。
   触った時点で保存しているが、それだけだと不安になるため。 */
.saved {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
}

.saved.ok   { color: var(--ok); }
.saved.warn { color: var(--accent); }
.saved.err  { color: var(--err); }

/* 時間軸の中から消せるようにする。一覧を別に出すと同じものが2回並んで見える */
.tl-ev { position: absolute; }

.tl-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px !important;
  height: 22px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1;
  color: var(--dim) !important;
  background: none !important;
  border: none !important;
}

.tl-del:hover { color: var(--err) !important; }
.tl-ev b { padding-right: 22px; }

/* 「これから」のやること */
.cal-dot.done { background: var(--ok); }

.wish { display: block; padding: 14px; }
.wish-head { display: flex; align-items: center; gap: 8px; }
.wish-head b { flex: 1; font-size: 15px; }

.wish-when { margin-top: 10px; }
.wish-when input[type="date"] { font-size: 13px; padding: 8px 10px; }

.wish-how textarea {
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: #141110;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
}

.wish-how textarea:focus { outline: none; border-color: var(--accent); }

.steps {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.step { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13.5px; }
.step.done { opacity: .5; }
.step.done .step-title { text-decoration: line-through; }
.step input[type="checkbox"] { width: auto; flex: none; }
.step-title { flex: 1; }
.step-due { font-size: 11px; color: var(--dim); flex: none; white-space: nowrap; }
.step-due.soon { color: var(--accent); }
.step-due.over { color: var(--err); }

/* 日付を選ぶボタン。押すとカレンダーが出る */
.pickbtn {
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  color: var(--text);
  background: #141110;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pickbtn.chosen { color: var(--accent); font-weight: 600; }

#ms-cal { margin-top: 10px; }
#ms-cal .cal-bar { font-size: 14px; }
#ms-cal .cal-day { min-height: 38px; font-size: 12px; }
#ms-cal .linkish { display: block; margin: 8px auto 0; }

/* ホームの予定を、左＝自分 / 右＝相手 の2列で見せる */
/* display:grid は hidden 属性より強いので、明示的に打ち消す */
.two-people[hidden] { display: none; }

.two-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.person-name {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  font-size: 11px;
  color: var(--dim);
}

.person-name .dot { width: 7px; height: 7px; }

.two-people .day-list li {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
}

.two-people .day-list .time { display: block; font-size: 11px; }
.two-people .day-list .title { display: block; margin-top: 1px; }
.two-people .day-list li.empty { color: var(--dim); font-size: 11.5px; }

/* 時間軸を左右に分けたときの、どちらの列かの見出し */
#home-people { margin-bottom: 2px; }

/* 一日の予定を、時刻を左に積んだ形で並べる（会社のカレンダーと同じ見え方） */
.daycards { list-style: none; padding: 0; margin: 8px 0 0; }
.daycards[hidden] { display: none; }

.daycards li {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.daycards .when {
  flex: none;
  width: 62px;
  padding: 9px 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  border-right: 3px solid var(--line);
  background: rgba(255, 255, 255, .02);
}

.daycards li.mine   .when { border-right-color: #4a7fe8; }
.daycards li.theirs .when { border-right-color: #e8a04a; }

.daycards .body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
}

.daycards .tag {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  color: #1a1413;
  background: var(--dim);
}

.daycards .tag.k-本業      { background: #6fa8dc; }
.daycards .tag.k-会議      { background: #9b8ec4; }
.daycards .tag.k-相談      { background: #e8a04a; }
.daycards .tag.k-移動      { background: #8fa38f; }
.daycards .tag.k-人と過ごす { background: #d98b8b; }
.daycards .tag.k-ひとりの時間 { background: #7fb59b; }
.daycards .tag.k-休息      { background: #6fc08a; }
.daycards .tag.k-ふたりの時間 { background: #d9a3c4; }

.daycards .name { flex: 1; min-width: 0; font-size: 14px; }
.daycards .name.masked { color: var(--dim); font-style: italic; }
.daycards .heavy { flex: none; font-size: 11px; color: #e88a8a; }
.daycards .empty { padding: 12px; color: var(--dim); font-size: 13px; display: block; }

/* いま編集中であることを、はっきり見せる */
.editing {
  margin: 0 0 12px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232, 160, 74, .08);
  border: 1px solid var(--accent);
  border-radius: 8px;
}

.daycards li .body { cursor: pointer; }
.daycards li.editing-now { border-color: var(--accent); }

/* 日付を選ぶ部品 */
.datepick-cal {
  margin-top: 8px;
  padding: 10px;
  background: #141110;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.datepick-cal .cal-bar { font-size: 14px; margin-bottom: 8px; }
.datepick-cal .cal-day { min-height: 36px; font-size: 12px; }
.datepick-cal .linkish { display: block; margin: 8px auto 0; }

/* 繰り返しの日にち選び。数字が多いので小さく詰める */
.daynums { gap: 5px; }

.daynums .chip {
  width: 38px;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
}

#ev-weekdays .chip, #ev-nths .chip { padding: 8px 14px; font-size: 13px; }

.daycards .repeat-mark {
  flex: none;
  font-size: 10.5px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
}