/* skills-calendar.css — Skills Calendar (js/skills-calendar.js), reached
   from the EDM Tools header button.

   Scoped under #skills-calendar-root (mount()'s own container). Reuses the
   app's shared --text/--surface2/--border/--accent tokens rather than
   redefining a palette of its own, same convention as css/player-talks.css. */

#skills-calendar-root * { box-sizing: border-box; }
/* Native form controls (button/select/input/textarea) don't inherit
   font-family from the page by default -- without this they silently fall
   back to the browser's own UI font (Arial) instead of the site's Rubik,
   even though a handful of input/textarea rules below already set
   font-family: inherit individually. This blanket rule is the actual
   guarantee, same reasoning as the identical rule on #edm-stats-overlay in
   index.html (which hardcodes 'Rubik' directly there; inherit works the
   same since body already sets it and reaches everything else in this
   panel that isn't a form control). */
#skills-calendar-root button,
#skills-calendar-root select,
#skills-calendar-root input,
#skills-calendar-root textarea { font-family: inherit; }
#skills-calendar-root {
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.skc-loading, .skc-error, .skc-empty { padding: 1rem; text-align: center; color: var(--text3); font-size: 0.8rem; }
.skc-error { color: var(--bad-text); }

.skc-topbar { flex: none; padding-bottom: 0.75rem; }
.skc-view-toggle { display: flex; gap: 0.5rem; }
.skc-view-tab {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text3);
  border-radius: 20px; padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.skc-view-tab:hover { border-color: var(--accent); color: var(--accent); }
.skc-view-tab.skc-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.skc-body { flex: 1; min-height: 0; display: flex; gap: 1rem; overflow-y: auto; align-items: flex-start; }
.skc-cal-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.skc-side-col { width: 300px; flex: none; display: flex; flex-direction: column; gap: 0.75rem; }

.skc-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.skc-side-section { padding: 0.9rem 1rem; }
.skc-side-section h3, .skc-full-section h3 { margin: 0 0 0.15rem; font-size: 0.95rem; }
.skc-sub { font-size: 0.75rem; color: var(--text3); margin-bottom: 0.6rem; }

.skc-cal-nav { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface2); border-radius: 10px 10px 0 0; }
.skc-cal-nav-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.skc-cal-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.skc-cal-month-label { font-size: 1rem; font-weight: 700; flex: 1; text-align: center; }

.skc-cal-scroll { overflow-x: auto; background: var(--surface2); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding-bottom: 0.5rem; }
.skc-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 0.6rem; min-width: 560px; }
.skc-weekday-row div { text-align: center; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); padding: 0.5rem 0 0.35rem; font-weight: 600; }
.skc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; padding: 0.6rem; min-width: 560px; }
.skc-day {
  min-width: 0; min-height: 6.5rem; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer;
  background: var(--surface); transition: border-color 0.12s ease;
}
.skc-day:hover { border-color: var(--accent); }
.skc-day-empty { visibility: hidden; cursor: default; }
.skc-day-today { border-color: var(--accent); }
.skc-day-open { box-shadow: 0 0 0 1px var(--accent) inset; }
.skc-daynum { font-size: 0.72rem; color: var(--text3); }
.skc-game-row { display: flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 600; color: var(--text3); }
.skc-game-logo { width: 13px; height: 13px; border-radius: 50%; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; }
.skc-game-home { color: var(--good-text, #3f7a4e); }
.skc-chips { display: flex; flex-direction: column; gap: 0.2rem; }
.skc-chip {
  font-size: 0.62rem; padding: 0.15rem 0.35rem; border-radius: 4px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
  background: var(--accent);
}
.skc-chip-undrawn { background: var(--text3); border: 1px dashed rgba(255,255,255,0.4); }

.skc-leader-row { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.75rem; }
.skc-leader-row:last-child { border-bottom: none; }
.skc-leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skc-leader-count { text-align: right; color: var(--text3); }
.skc-bar-track { grid-column: 1 / -1; height: 4px; background: var(--surface); border-radius: 3px; overflow: hidden; margin-top: 1px; }
.skc-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }

.skc-roster-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.35rem 0.1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.skc-roster-row:hover { color: var(--accent); }
.skc-roster-right { display: flex; align-items: center; gap: 0.4rem; }
.skc-roster-count { font-size: 0.68rem; color: var(--text3); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 0.1rem 0.4rem; }
.skc-roster-count.skc-zero { opacity: 0.5; }
.skc-roster-caret { font-size: 0.6rem; color: var(--text3); transition: transform 0.15s ease; display: inline-block; }
.skc-roster-caret.skc-open { transform: rotate(90deg); color: var(--accent); }
.skc-roster-expand { display: none; flex-direction: column; gap: 0.3rem; padding: 0.1rem 0.1rem 0.5rem; border-bottom: 1px solid var(--border); }
.skc-roster-expand.skc-open { display: flex; }

.skc-full-section { padding: 0.9rem 1rem; width: 100%; }
.skc-roster-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.2rem; }
.skc-roster-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); font-weight: 600; padding: 0.5rem 0 0.2rem; }
.skc-drill-group { border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.72rem; }
.skc-drill-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.skc-drill-group-head span:first-child { font-weight: 600; }
.skc-drill-group-count { color: var(--accent); font-weight: 600; flex: none; }
.skc-drill-group-dates { font-size: 0.65rem; color: var(--text3); margin-top: 0.15rem; }

.skc-log-entry { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.5rem; }
.skc-log-entry-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.skc-log-entry-actor { font-size: 0.68rem; font-weight: 700; color: var(--accent); }
.skc-log-entry-ts { font-size: 0.62rem; color: var(--text3); flex: none; }
.skc-log-entry-body { color: var(--text3); }
.skc-log-entry-body b { color: var(--text); font-weight: 600; }

.skc-hist-item { border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.7rem; }
.skc-hist-date { font-size: 0.62rem; color: var(--text3); margin-bottom: 0.1rem; }
.skc-hist-drill { font-weight: 600; }

/* ── Day drawer ── */
.skc-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: flex-end; z-index: 60; }
.skc-drawer { width: min(440px, 92vw); height: 100%; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; padding: 1.1rem 1.2rem 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.skc-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.skc-drawer-head h2 { margin: 0; font-size: 1.1rem; }
.skc-close-x { border: 1px solid var(--border); background: var(--surface2); color: var(--text); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; flex: none; }
.skc-close-x:hover { border-color: var(--accent); color: var(--accent); }
.skc-drawer-entries { display: flex; flex-direction: column; gap: 0.7rem; }

.skc-entry-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.skc-entry-top { display: flex; gap: 0.6rem; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); background: var(--surface2); }
.skc-entry-canvas { width: 44px; height: 32px; border-radius: 5px; flex: none; background: var(--surface); border: 1px solid var(--border); }
.skc-entry-main { flex: 1; min-width: 0; }
.skc-entry-title { font-weight: 600; font-size: 0.85rem; }
.skc-entry-title .skc-edit-note-link { font-weight: 400; }
.skc-entry-title-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.8rem; font-weight: 600; font-family: inherit; margin-bottom: 0.35rem; }
.skc-entry-link-muted { font-size: 0.65rem; color: var(--text3); margin-top: 0.2rem; }
.skc-entry-actions { margin-left: auto; align-self: flex-start; flex: none; display: flex; align-items: center; gap: 0.35rem; }
.skc-entry-duplicate { border: 1px solid var(--border); background: var(--surface); color: var(--text3); border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.62rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.skc-entry-duplicate:hover { border-color: var(--accent); color: var(--accent); }
.skc-entry-delete { border: 1px solid var(--border); background: var(--surface); color: var(--text3); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; line-height: 1; flex: none; }
.skc-entry-delete:hover { border-color: var(--bad-text); color: var(--bad-text); }
.skc-entry-body { padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.skc-participants { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.skc-p-chip { font-size: 0.68rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 0.15rem 0.5rem 0.15rem 0.35rem; display: flex; align-items: center; gap: 0.3rem; }
.skc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good-text, #3f7a4e); }
.skc-p-chip-remove { border: none; background: none; color: var(--text3); cursor: pointer; font-size: 0.75rem; line-height: 1; padding: 0; }
.skc-p-chip-remove:hover { color: var(--bad-text); }
.skc-add-participant { font-size: 0.68rem; border: 1px dashed var(--border); background: none; color: var(--text3); border-radius: 20px; padding: 0.15rem 0.5rem; cursor: pointer; }
.skc-add-participant:hover { border-color: var(--accent); color: var(--accent); }
.skc-add-participant-select { width: auto; font-size: 0.68rem; padding: 0.15rem 0.4rem; border-radius: 20px; }
.skc-entry-notes { font-size: 0.72rem; color: var(--text3); font-style: italic; border-left: 2px solid var(--border); padding-left: 0.4rem; }
.skc-entry-notes-row { display: flex; align-items: baseline; gap: 0.1rem; }
.skc-edit-note-btn { cursor: pointer; font-family: inherit; }
.skc-edit-note-btn.skc-edit-note-link { font-size: 0.62rem; border: none; background: none; color: var(--accent); text-decoration: underline; padding: 0; margin-left: 0.3rem; }
.skc-edit-note-btn.skc-add-note-btn { font-size: 0.68rem; border: 1px dashed var(--border); background: none; color: var(--text3); border-radius: 20px; padding: 0.15rem 0.5rem; }
.skc-edit-note-btn.skc-add-note-btn:hover { border-color: var(--accent); color: var(--accent); }
.skc-note-edit { display: flex; flex-direction: column; gap: 0.3rem; }
.skc-note-edit-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.35rem 0.5rem; font-size: 0.72rem; font-family: inherit; resize: vertical; }

.skc-add-drill-btn { border: 1px dashed var(--border); background: none; color: var(--text3); border-radius: 8px; padding: 0.6rem; font-size: 0.75rem; cursor: pointer; text-align: center; }
.skc-add-drill-btn:hover { border-color: var(--accent); color: var(--accent); }

.skc-log-form { display: flex; flex-direction: column; gap: 0.6rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; background: var(--surface2); }
.skc-log-form label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); font-weight: 600; display: block; margin-bottom: 0.25rem; }
.skc-log-form input, .skc-log-form textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.78rem; font-family: inherit; resize: vertical; }
.skc-log-hint { font-size: 0.65rem; color: var(--text3); min-height: 0.9rem; margin-top: 0.2rem; }
.skc-log-hint.skc-found { color: var(--good-text, #3f7a4e); }
/* No max-height/inner scrollbar on purpose -- the drawer itself already
   scrolls (.skc-drawer, overflow-y:auto), so the player picker just flows
   to however tall it needs to be and shows every name at once, instead of
   hiding most of the roster behind a small scrollable box. */
.skc-log-players { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.1rem; }
.skc-log-player-chip { font-size: 0.68rem; border: 1px solid var(--border); border-radius: 20px; padding: 0.2rem 0.55rem; cursor: pointer; background: var(--surface); user-select: none; }
.skc-log-player-chip.skc-selected { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.skc-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.skc-btn-save, .skc-btn-cancel { border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.skc-btn-save { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.skc-btn-save:hover { opacity: 0.9; }
.skc-btn-cancel { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; }
.skc-btn-cancel:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .skc-body { flex-direction: column; }
  .skc-side-col { width: 100%; }
  .skc-roster-groups { grid-template-columns: 1fr; }
}