:root {
  --ink: #1b2330;
  --muted: #6d6458;
  --paper: #f6f3ec;
  --line: #e4dccf;
  --rust: #e07a3d;
  --cell: 30px;
  --row: 30px;
  --name: 228px;
  color: var(--ink);
  font-family: "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #e6e0d4;
  color: var(--ink);
}

button, input, select { font: inherit; color: inherit; }

.top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 14px 18px 12px;
  background: var(--ink);
  color: #f6f1e7;
}

.top h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.top p {
  margin: 4px 0 0;
  color: #c9c1b4;
  font-size: 12.5px;
  line-height: 1.45;
}

.source {
  color: #aea698;
  font-size: 12px;
  white-space: nowrap;
}

.layout {
  flex: 1;
  min-height: 0;
  display: flex;
}

.board-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.toolbar, .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 14px;
  background: var(--paper);
}

.toolbar { border-bottom: 1px solid var(--line); }
.legend {
  padding-top: 0;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}

.toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }

input[type="search"], select, .toolbar button, .detail button, .sec-head button {
  background: #fff;
  border: 1px solid #d5cec1;
  border-radius: 8px;
  padding: 6px 10px;
}

input[type="search"] { width: 180px; }
.toolbar button, .sec-head button { cursor: pointer; }
.toolbar button:hover, .sec-head button:hover, .detail-head button:hover { border-color: #b7ad9e; }

#count { margin-left: auto; color: var(--muted); font-size: 13px; }
#hint { color: var(--muted); }

.legend span { display: inline-flex; align-items: center; gap: 5px; }
.bar, .sw { width: 42px; height: 10px; border-radius: 99px; display: inline-block; }
.sw { width: 14px; }
.bar.ppl { background: linear-gradient(90deg, #d5e4f2, #143654); }
.bar.ir { background: linear-gradient(90deg, #e6dff3, #2e2154); }
.bar.multi { background: linear-gradient(90deg, #f8e6cf, #4e3010); }
.bar.cfi { background: linear-gradient(90deg, #d7eee4, #103c2c); }
.bar.fg { background: linear-gradient(90deg, #e4e7ec, #2c3642); }
.sw.caa { background: #8c2f39; }
.sw.support {
  background: repeating-linear-gradient(135deg, #f7f4ee, #f7f4ee 3px, #cfc6b8 3px, #cfc6b8 5px);
}
.sw.hole { background: #d5cec2; }

.board {
  flex: 1;
  overflow: auto;
  background: var(--paper);
  user-select: none;
}

.loading, .empty {
  padding: 28px 18px;
  color: var(--muted);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
}

thead th {
  position: sticky;
  background: var(--paper);
  font-weight: 650;
}

thead tr.months th { top: 0; z-index: 3; height: 22px; }
thead tr.days th { top: 22px; z-index: 3; height: 24px; box-shadow: 0 1px 0 var(--line); }

th.stick {
  left: 0;
  z-index: 5;
  width: var(--name);
  min-width: var(--name);
  max-width: var(--name);
}

th.month {
  text-align: left;
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}

th.day, td.c {
  width: var(--cell);
  min-width: var(--cell);
  max-width: var(--cell);
  padding: 0;
  text-align: center;
  overflow: hidden;
}

th.day { color: #4e473f; font-size: 10px; vertical-align: bottom; }
th.day .n { display: block; line-height: 16px; }
th.day.sat .n, th.day.sun .n { color: #a24b32; }
th.day.mismatch .n { text-decoration: underline dotted #a24b32; }
th.day.today { box-shadow: inset 0 -2px 0 var(--rust), 0 1px 0 var(--line); }

th.who {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper);
  width: var(--name);
  min-width: var(--name);
  max-width: var(--name);
  padding: 0;
  text-align: left;
  font-weight: 500;
}

tr.banner th {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: #efeae1;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
}

.who-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: var(--name);
  min-height: var(--row);
  border: 0;
  background: transparent;
  padding: 3px 8px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.who-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.who-name small {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 500;
}

.pill {
  flex: none;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

tr.on th.who { background: #fff1df; box-shadow: inset 3px 0 0 var(--rust); }

td.c {
  height: var(--row);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: var(--row);
  cursor: pointer;
}

td.c.more { box-shadow: inset -5px -5px 0 -3px currentColor; }
td.c.today { box-shadow: inset 0 -2px 0 var(--rust); }
td.c.today.more { box-shadow: inset 0 -2px 0 var(--rust), inset -5px -5px 0 -3px currentColor; }
td.c.month-start { box-shadow: inset 1px 0 0 #cfc6b8; }
td.c.focus { outline: 2px solid var(--ink); outline-offset: -2px; position: relative; z-index: 1; }
td.c:hover { outline: 1px solid rgba(27, 35, 48, 0.45); outline-offset: -1px; }

td.c.support {
  background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(140, 128, 112, 0.28) 3px, rgba(140, 128, 112, 0.28) 4px);
}
td.c.hole { background: #e3dcd2; }
td.c.named { background: #d9d3c7; color: var(--ink); }
td.c.caa { background: #8c2f39; color: #fff7f4; }

.ppl-0 { background: #d5e4f2; color: var(--ink); }
.ppl-1 { background: #b7d0e8; color: var(--ink); }
.ppl-2 { background: #8fb6d8; color: var(--ink); }
.ppl-3 { background: #679cc6; color: var(--ink); }
.ppl-4 { background: #3f82b4; color: #f4f7fb; }
.ppl-5 { background: #2a6896; color: #f4f7fb; }
.ppl-6 { background: #1c4e78; color: #f4f7fb; }
.ppl-7 { background: #143654; color: #f4f7fb; }

.ir-0 { background: #e6dff3; color: var(--ink); }
.ir-1 { background: #d0c4e8; color: var(--ink); }
.ir-2 { background: #b4a2d6; color: var(--ink); }
.ir-3 { background: #967ec4; color: var(--ink); }
.ir-4 { background: #7859b0; color: #f7f4fb; }
.ir-5 { background: #5e4096; color: #f7f4fb; }
.ir-6 { background: #452f78; color: #f7f4fb; }
.ir-7 { background: #2e2154; color: #f7f4fb; }

.multi-0 { background: #f8e6cf; color: var(--ink); }
.multi-1 { background: #f0d0aa; color: var(--ink); }
.multi-2 { background: #e4b27a; color: var(--ink); }
.multi-3 { background: #d4924e; color: var(--ink); }
.multi-4 { background: #c07830; color: #fff8ef; }
.multi-5 { background: #9a5e22; color: #fff8ef; }
.multi-6 { background: #744618; color: #fff8ef; }
.multi-7 { background: #4e3010; color: #fff8ef; }

.cfi-0 { background: #d7eee4; color: var(--ink); }
.cfi-1 { background: #b7dfcc; color: var(--ink); }
.cfi-2 { background: #8cc9ad; color: var(--ink); }
.cfi-3 { background: #5eaf8c; color: var(--ink); }
.cfi-4 { background: #3a9470; color: #f3fbf7; }
.cfi-5 { background: #267858; color: #f3fbf7; }
.cfi-6 { background: #185840; color: #f3fbf7; }
.cfi-7 { background: #103c2c; color: #f3fbf7; }

.fg-0 { background: #e4e7ec; color: var(--ink); }
.fg-1 { background: #cfd5de; color: var(--ink); }
.fg-2 { background: #b3bcc8; color: var(--ink); }
.fg-3 { background: #939eae; color: var(--ink); }
.fg-4 { background: #748294; color: #f7f8fa; }
.fg-5 { background: #59687a; color: #f7f8fa; }
.fg-6 { background: #414e5e; color: #f7f8fa; }
.fg-7 { background: #2c3642; color: #f7f8fa; }

.other-0 { background: #e7ecd6; color: var(--ink); }
.other-1 { background: #d3dcb4; color: var(--ink); }
.other-2 { background: #b7c68a; color: var(--ink); }
.other-3 { background: #9aaf62; color: var(--ink); }
.other-4 { background: #7d9444; color: #f8faef; }
.other-5 { background: #627832; color: #f8faef; }
.other-6 { background: #485824; color: #f8faef; }
.other-7 { background: #313c18; color: #f8faef; }

.density-compact { --cell: 12px; --row: 22px; }
.density-compact td.c { font-size: 0; }
.density-compact th.day .n { visibility: hidden; }
.density-compact .pill { font-size: 10px; padding: 1px 5px; }
.density-std { --cell: 32px; --row: 32px; }
.density-std td.c { font-size: 11px; font-weight: 650; }

.detail {
  width: 420px;
  flex: none;
  overflow: auto;
  background: #fbfaf6;
  border-left: 1px solid var(--line);
  padding: 14px 16px 36px;
}

.detail-head, .sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.detail h2 { margin: 0; font-size: 22px; }
.detail h2 small { margin-left: 8px; color: var(--muted); font-size: 14px; font-weight: 550; }
.detail h3 { margin: 0; font-size: 14px; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.note { margin: 12px 0; line-height: 1.5; font-size: 13.5px; }

.detail-head button {
  border: 1px solid #d5cec1;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0 0;
}

.stats div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
}

.stats dt { color: var(--muted); font-size: 11px; }
.stats dd { margin: 3px 0 0; font-weight: 650; font-size: 14px; }

.detail section { margin-top: 18px; }
.sec-head label { color: var(--muted); font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }

.chart-block { margin-top: 8px; }
.chart-block p { margin: 0 0 2px; color: var(--muted); font-size: 12px; }
.chart-block svg { width: 100%; height: auto; display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.chip em { font-style: normal; font-weight: 500; opacity: 0.75; margin-left: 4px; }
.chip.on { outline: 2px solid var(--ink); }

.callout {
  background: #fff6ea;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

.day-card { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.day-card.focus { background: #fff4e4; margin: 0 -16px; padding: 8px 16px 4px; }
.day-card h3 { font-size: 13px; margin-bottom: 6px; }
.sortie { margin: 0 0 7px; font-size: 12.5px; line-height: 1.45; }
.sortie .when { color: var(--muted); }
.sortie.support { color: #8a8175; }
.route { color: var(--muted); }

.tip {
  position: fixed;
  z-index: 30;
  max-width: 340px;
  background: var(--ink);
  color: #f6f1e7;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(27, 35, 48, 0.22);
}
.tip[hidden] { display: none; }
.tip .muted { color: #c9c1b4; }
.tip div + div { margin-top: 2px; }

@media (max-width: 900px) {
  body { height: auto; min-height: 100vh; }
  .top { flex-direction: column; align-items: flex-start; }
  .layout { flex-direction: column; }
  .board { min-height: 62vh; }
  .detail { width: auto; max-height: none; border-left: 0; border-top: 1px solid var(--line); }
  #count { margin-left: 0; }
}