/* RATS — Attendance. Read at a glance: three columns (Top / Middle / Bottom), one
   line of controls, no walls of text. Sections are a heading with a rule, never a
   boxed card (the Okanvil look). Approved mock: claude.ai/artifact/E2UhGkyhgmWn964Bw33vpK */

.dim { color: var(--text-faint) }
.gold { color: var(--accent-hi) }
.good { color: #7fcf95 }
.mid { color: #e6b866 }
.bad { color: #ff8a8a }
.sep { margin: 0 9px; color: var(--text-faint) }
.foot { margin: 14px 0 0; font-size: 12.5px; color: var(--text-dim-2) }

/* ---- view switch: underline tabs ---- */
.atabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: 4px 0 14px }
.atab {
  all: unset; cursor: pointer; padding: 9px 2px;
  font-size: 14px; font-weight: 600; color: var(--text-dim-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atab:hover { color: var(--white) }
.atab.active { color: var(--accent-hi); border-bottom-color: var(--accent) }
.atab:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px }

/* ---- one line of controls ---- */
.ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.ctl [hidden] { display: none }
.ctl .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint) }
/* the same height, fill and corners as the segmented controls beside it */
.ctl .search {
  margin-left: auto; width: 210px; max-width: 100%; height: 34px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
}
.ctl .search:focus { border-color: var(--accent) }

/* ---- this-week strip on the board ---- */
.strip {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  padding: 11px 0; margin-bottom: 18px; border-block: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
.strip .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint) }
.strip b { font-size: 19px; font-variant-numeric: tabular-nums; margin-right: 4px }
.strip .nm { font-weight: 600 }

/* ---- the three columns ---- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start }
.col h2 {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; padding-bottom: 6px;
  font: 400 22px var(--display); color: var(--heading); text-transform: none; letter-spacing: 0;
  border-bottom: 2px solid var(--border);
}
.col h2 .rng { font: 600 12px var(--body); color: var(--text-faint); font-variant-numeric: tabular-nums }
.col h2 .c { margin-left: auto; font: 600 12px var(--body); color: var(--text-dim-2) }
.col.top h2 { border-bottom-color: #7fcf95 }
.col.midc h2 { border-bottom-color: #e6b866 }
.col.bot h2 { border-bottom-color: #ff8a8a }
/* about 12 names tall, the rest scrolls */
.col ol { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 460px; overflow-y: auto; overscroll-behavior: contain }
.col li {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 0 10px;
  padding: 6px 2px; border-bottom: 1px solid var(--surface-2);
}
.col li .pos { font-size: 12px; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums }
.col li .who { display: flex; align-items: center; gap: 7px; min-width: 0 }
.col li .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.col li .rk { font-size: 10px; font-weight: 700; letter-spacing: .04em; flex: none }
.col li .runs { margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums }
.col li .val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums }
.col li .bar { grid-column: 2 / 4; height: 3px; margin-top: 5px; background: var(--surface-2); border-radius: 2px; overflow: hidden }
.col li .bar i { display: block; height: 100% }
.col li > .btn { grid-column: 2 / 4; justify-self: end; margin-top: 4px }
.col.top .val { color: #7fcf95 } .col.top .bar i { background: #7fcf95 }
.col.midc .val { color: #e6b866 } .col.midc .bar i { background: #e6b866 }
.col.bot .val { color: #ff8a8a } .col.bot .bar i { background: #ff8a8a }
.col .none { margin: 14px 2px; color: var(--text-dim-2); font-size: 13px }

.tag { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .03em; border: 1px solid; border-radius: 3px; padding: 0 5px }
.tag.miss { color: #ff8a8a; border-color: #5a3328 }
.tag.vac { color: var(--text-dim-2); border-color: var(--border) }
.tag.new { color: var(--accent-hi); border-color: #4a3c20 }

button.sm, .btn.sm { height: 24px; padding: 0 10px; font-size: 12px }
button.xs, .btn.xs { height: 20px; padding: 0 8px; font-size: 11px }

/* ---- this week ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-block: 1px solid var(--border) }
.stat { background: var(--bg); padding: 14px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px }
.stat b { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums }
.stat span { font-size: 12px; color: var(--text-dim-2) }
.stat.in b { color: var(--accent-hi) }
.stat.miss b { color: #ff8a8a }
.stat.open b { color: #e6b866 }
.stat.ok b { color: #7fcf95 }
.ids { margin: 10px 2px 0; font-size: 13px; color: var(--text-dim) }
.ids b { color: var(--white); font-weight: 600 }

h2.hsec {
  display: flex; align-items: center; gap: 10px; margin: 28px 0 10px;
  font-family: var(--display); font-weight: 400; font-size: 21px;
  color: var(--heading); text-transform: none; letter-spacing: 0;
}
h2.hsec::after { content: ""; flex: 1; height: 1px; background: var(--line-warm) }
h2.hsec .cnt { font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--text-faint) }

.list { display: flex; flex-direction: column }
.li { border-bottom: 1px solid var(--border); padding: 7px 2px }
.li .line { display: flex; align-items: center; gap: 12px }
.li .rk { font-size: 10px; font-weight: 700; letter-spacing: .04em }
.li .nm { min-width: 140px; font-weight: 600 }
.li .what { flex: 1; font-size: 13px; color: var(--text-dim) }
.li .what b { font-weight: 600 }
.li .what.ok { color: #7fcf95 }
.li.done { opacity: .7 }
.edit { display: flex; gap: 8px; margin-top: 8px }
.edit input { flex: 1 1 auto; min-width: 0 }
.names { margin: 0; line-height: 1.9; font-weight: 600 }
.empty { color: var(--text-dim-2); padding: 26px 4px; text-align: center }

/* ---- raids: one line per night, grouped by lockout week ---- */
.rwk {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  font: 400 18px var(--display); color: var(--heading);
}
.rwk::after { content: ""; flex: 1; height: 1px; background: var(--line-warm) }
.rlog > .rwk:first-child { margin-top: 0 }
.raid {
  display: grid; grid-template-columns: 110px 120px 1fr auto 32px; align-items: center; gap: 12px;
  padding: 7px 2px; border-bottom: 1px solid var(--surface-2);
}
.raid.off .rn, .raid.off .d { color: var(--text-faint) }
.raid .d { color: var(--text-dim); font-variant-numeric: tabular-nums }
.raid .rn { font-weight: 700; color: var(--text) }
.raid .hc { font-style: normal; font-size: 10px; color: var(--accent-hi); border: 1px solid #4a3c20; border-radius: 3px; padding: 0 4px; margin-left: 6px }
.raid .rm { font-size: 13px; color: var(--text-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* Counts / Optional: a small switch with its word */
.sw {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-dim-2); min-width: 86px;
}
.sw i {
  position: relative; width: 28px; height: 16px; border-radius: 9px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
}
.sw i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-faint); transition: left .12s ease;
}
.sw.on { color: var(--text) }
.sw.on i { background: #3a3016; border-color: #4a3c20 }
.sw.on i::after { left: 14px; background: var(--accent-hi) }
.sw:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px }
.kebab { all: unset; cursor: pointer; text-align: center; color: var(--text-dim-2); font-size: 18px; line-height: 1 }
.kebab:hover, .kebab:focus-visible { color: var(--accent-hi) }
.rmenu {
  position: absolute; z-index: 20; display: flex; flex-direction: column; min-width: 170px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.rmenu[hidden] { display: none }
.rmenu button { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 5px; font-size: 13px; color: var(--text) }
.rmenu button:hover, .rmenu button:focus-visible { background: var(--surface) }
.rmenu .del { color: #ff8a8a }
.redit { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 2px 10px; border-bottom: 1px solid var(--surface-2) }
.redit input { flex: 1 1 200px; min-width: 0 }
.rplayers { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 8px 2px 12px; border-bottom: 1px solid var(--surface-2) }
.rplayers .grp { display: flex; flex-direction: column; gap: 1px; font-size: 13px; font-weight: 600 }
.rplayers .grp b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px }
.rplayers .ns span { color: var(--text-dim-2) }

/* ---- import dialog: one paste box and one line of summary ---- */
.impdlg {
  width: min(520px, calc(100vw - 32px));
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px;
}
.impdlg::backdrop { background: rgba(0, 0, 0, .6) }
.impdlg h3 { margin: 0 0 4px; font-size: 16px; color: var(--white) }
.impdlg .sub { margin: 0 0 12px; font-size: 13px; color: var(--text-dim) }
.impdlg textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; resize: none }
.impsum { min-height: 20px; margin: 10px 0 14px; font-size: 13px; color: var(--text-dim) }
.impsum b { color: var(--white) }
.impbtns { display: flex; justify-content: flex-end; gap: 8px }

@media (max-width: 860px) {
  .board { grid-template-columns: 1fr }
  .ctl .search { margin-left: 0; width: 100% }
  .stats { grid-template-columns: repeat(2, 1fr) }
  .li .nm { min-width: 100px }
}

@media (max-width: 640px) {
  .raid { grid-template-columns: 1fr auto 32px }
  .raid .d, .raid .rm { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: reduce) { .sw i::after { transition: none } }
.rplayers .grp span i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-faint) }