/* ============================================================
   World Clock / campaign calendar
   ============================================================ */

/* ---- shared form primitives ---- */
.wc-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}
.wc-field--wide { grid-column: 1 / -1; }
.wc-field__label {
  font: 600 .72rem/1.2 "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #6d5847);
}
.wc-field__label small {
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .8;
}

.wc-input,
.wc-select select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border, rgba(78, 48, 26, .38));
  border-radius: 3px;
  background: rgba(255, 253, 242, .92);
  color: var(--ink, #2e2119);
  font: 400 .95rem/1.4 "Libre Baskerville", Georgia, serif;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.wc-input:hover,
.wc-select select:hover { border-color: var(--gold, #b78a3f); }
.wc-input:focus,
.wc-select select:focus {
  outline: none;
  border-color: var(--gold, #b78a3f);
  box-shadow: 0 0 0 3px rgba(183, 138, 63, .25);
}
textarea.wc-input { resize: vertical; min-height: 5.5rem; }

/* native date/time picker: give it room and a matching indicator */
.wc-input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color-scheme: light;
}
.wc-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  filter: sepia(.4) saturate(1.4) hue-rotate(-10deg);
}
.wc-input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }

.wc-select { position: relative; display: block; }
.wc-select select {
  appearance: none;
  padding-right: 2.1rem;
  cursor: pointer;
}
.wc-select::after {
  content: "";
  position: absolute;
  right: .85rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--muted, #6d5847);
  border-bottom: 2px solid var(--muted, #6d5847);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.wc-toggle {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border, rgba(78, 48, 26, .38));
  border-radius: 3px;
  background: rgba(255, 253, 242, .55);
  cursor: pointer;
}
.wc-toggle:hover { border-color: var(--gold, #b78a3f); }
.wc-toggle input { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--red, #8c1d18); }
.wc-toggle span { display: flex; flex-direction: column; gap: .1rem; }
.wc-toggle strong { font: 600 .9rem/1.2 "Libre Baskerville", Georgia, serif; color: var(--ink, #2e2119); }
.wc-toggle small { color: var(--muted, #6d5847); font-size: .78rem; }

/* ---- event form ---- */
.world-clock--form { max-width: 940px; }
.wc-form { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 1.5rem; }
.wc-form__section { display: flex; flex-direction: column; gap: .85rem; }
.wc-form__section + .wc-form__section { border-top: 1px solid rgba(78, 48, 26, .18); padding-top: 1.25rem; }
.wc-form__section .eyebrow { margin: 0; }
.wc-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .wc-form__grid { grid-template-columns: 1fr; }
}
.wc-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding-top: .25rem;
}
.wc-form__danger {
  margin-top: 1rem;
  padding-top: 1rem;
}

/* ---- icon picker (custom dropdown with previews) ---- */
.wc-icon-picker { position: relative; max-width: 22rem; }
.wc-icon-picker__trigger {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--border, rgba(78, 48, 26, .38));
  border-radius: 3px;
  background: rgba(255, 253, 242, .92);
  color: var(--ink, #2e2119);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wc-icon-picker__trigger:hover,
.wc-icon-picker__trigger[aria-expanded="true"] { border-color: var(--gold, #b78a3f); }
.wc-icon-picker__trigger:focus-visible { outline: 2px solid rgba(183, 138, 63, .45); outline-offset: 1px; }
.wc-icon-picker__trigger img { width: 2rem; height: 2rem; object-fit: contain; flex: 0 0 auto; }
.wc-icon-picker__trigger > span[data-wc-icon-label] { flex: 1; font-weight: 600; }
.wc-icon-picker__none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px dashed rgba(78, 48, 26, .4);
  border-radius: 50%;
  color: var(--muted, #6d5847);
  font-size: 1rem;
}
.wc-icon-picker__chevron { color: var(--muted, #6d5847); transition: transform 150ms ease; }
.wc-icon-picker__trigger[aria-expanded="true"] .wc-icon-picker__chevron { transform: rotate(180deg); }

.wc-icon-picker__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3rem;
  max-height: 19rem;
  padding: .6rem;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(78, 48, 26, .38));
  border-radius: 3px;
  background: rgba(255, 253, 242, .99);
  box-shadow: 0 .6rem 1.6rem rgba(46, 33, 25, .28);
}
.wc-icon-picker__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .45rem .3rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ink, #2e2119);
  font-size: .7rem;
  text-align: center;
  cursor: pointer;
}
.wc-icon-picker__option:hover { background: rgba(140, 29, 24, .08); border-color: rgba(140, 29, 24, .25); }
.wc-icon-picker__option.is-selected {
  border-color: var(--red, #8c1d18);
  background: rgba(140, 29, 24, .12);
}
.wc-icon-picker__option img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.wc-icon-picker__option span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-icon-picker__option .wc-icon-picker__none { width: 2.1rem; height: 2.1rem; }

/* ---- advance panel ---- */
.world-clock-advance {
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.35rem;
}
.world-clock-advance__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: flex-end;
}
.world-clock-advance__quick { display: flex; flex-direction: column; gap: .5rem; }
.world-clock-advance__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.world-clock-advance__exact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-left: auto;
}
.world-clock-advance__exact .wc-field { min-width: 15rem; }

/* ---- month grid ---- */
.world-clock-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 960px) {
  .world-clock-grid-wrap { grid-template-columns: 1fr; }
}

.world-clock-calendar { padding: 1.1rem 1.35rem; }
.world-clock-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.world-clock-calendar__nav h2 {
  margin: 0;
  font: 600 1.25rem "Cinzel", serif;
  color: var(--red, #8c1d18);
}
.world-clock-calendar__weekdays,
.world-clock-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.world-clock-calendar__weekdays {
  font: 600 .7rem/1 "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #6d5847);
  margin-bottom: 5px;
}
.world-clock-calendar__weekdays span { text-align: right; padding-right: .35rem; }
.world-clock-calendar__week { margin-bottom: 5px; }

.world-clock-day {
  min-height: 96px;
  border: 1px solid rgba(78, 48, 26, .18);
  border-radius: 5px;
  padding: 3px 5px;
  background: rgba(255, 253, 242, .5);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.world-clock-day.is-outside { background: transparent; border-color: transparent; }
.world-clock-day.is-outside .world-clock-day__head { opacity: .4; }
.world-clock-day.is-today {
  border-color: var(--gold, #b78a3f);
  box-shadow: inset 0 0 0 2px var(--gold, #b78a3f);
  background: rgba(183, 138, 63, .12);
}
.world-clock-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  min-height: 15px;
}
.world-clock-day__num {
  font: 600 .82rem/1 "Cinzel", serif;
  color: var(--muted, #6d5847);
}
.world-clock-day.is-today .world-clock-day__num { color: var(--red, #8c1d18); }
.world-clock-day__moon {
  font: 600 .6rem/1 "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold, #b78a3f);
}
.world-clock-day__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---- moon phase glyph ---- */
.wc-moon {
  --moon-lit: #f6edd6;
  --moon-dark: #4a3826;
  display: inline-block;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(74, 56, 38, .55);
  background: var(--moon-dark);
  flex: 0 0 auto;
  vertical-align: -2px;
}
.wc-moon.p0 { background: var(--moon-dark); }
.wc-moon.p4 { background: var(--moon-lit); }
.wc-moon.p2 { background: linear-gradient(90deg, var(--moon-dark) 50%, var(--moon-lit) 50%); }
.wc-moon.p6 { background: linear-gradient(90deg, var(--moon-lit) 50%, var(--moon-dark) 50%); }
.wc-moon.p1 { background: var(--moon-dark); box-shadow: inset -4px 0 0 0 var(--moon-lit); }
.wc-moon.p3 { background: var(--moon-lit); box-shadow: inset 4px 0 0 0 var(--moon-dark); }
.wc-moon.p5 { background: var(--moon-lit); box-shadow: inset -4px 0 0 0 var(--moon-dark); }
.wc-moon.p7 { background: var(--moon-dark); box-shadow: inset 4px 0 0 0 var(--moon-lit); }
.wc-moon.is-principal {
  border-color: var(--gold, #b78a3f);
  box-shadow: 0 0 0 2px rgba(183, 138, 63, .4);
}

.world-clock-moon-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(78, 48, 26, .16);
  font-size: .72rem;
  color: var(--muted, #6d5847);
}
.world-clock-moon-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.world-clock-moon-legend .wc-moon { width: 12px; height: 12px; }

.world-clock-chip {
  display: block;
  font-size: .68rem;
  line-height: 1.25;
  padding: 1px 5px;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: #241a13;
  background: #d9d2c3;
  border-left: 3px solid rgba(0, 0, 0, .18);
}
.world-clock-chip:hover { filter: brightness(.96); color: #241a13; }
.world-clock-chip.is-festival { background: #f4c9a1; border-left-color: #c47f37; }
.world-clock-chip.is-quest_deadline { background: #f1b0b0; border-left-color: #b23b3b; }
.world-clock-chip.is-travel { background: #bcd6e8; border-left-color: #4d7fa1; }
.world-clock-chip.is-construction { background: #d8c69a; border-left-color: #9a7d3f; }
.world-clock-chip.is-weather { background: #c7dcc4; border-left-color: #5f8f5a; }
.world-clock-chip.is-celestial { background: #cbc3ea; border-left-color: #6f5fca; }
.world-clock-chip.is-faction { background: #e2c1d8; border-left-color: #a35a8f; }
.world-clock-chip.is-npc_movement { background: #cdd8b6; border-left-color: #7f9455; }
.world-clock-chip.is-bastion { background: #cfd0d4; border-left-color: #6d6f77; }
.world-clock-chip.is-rumor { background: #e9dcae; border-left-color: #b39a3f; }
.world-clock-chip.is-economy { background: #bfe0d4; border-left-color: #4f9b82; }
.world-clock-chip.is-manual { background: #ddd6c7; border-left-color: #8b7f66; }

/* ---- agenda ---- */
.world-clock-agenda { padding: 1.1rem 1.35rem; }
.world-clock-agenda h2 { font: 600 1.2rem "Cinzel", serif; color: var(--red, #8c1d18); margin: .15rem 0 .6rem; }
.world-clock-agenda ul { list-style: none; margin: 0; padding: 0; }
.world-clock-agenda__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(78, 48, 26, .14);
}
.world-clock-agenda__item:last-child { border-bottom: 0; }
.world-clock-agenda__item a { font-weight: 600; color: var(--ink, #2e2119); text-decoration: none; }
.world-clock-agenda__item a:hover { color: var(--red, #8c1d18); }
.world-clock-agenda__item time { font-size: .75rem; color: var(--muted, #6d5847); }
.world-clock-agenda__item .world-clock-chip { align-self: flex-start; }

/* ---- advance report ---- */
.world-clock-report { padding: 1.1rem 1.35rem; margin-top: 1.35rem; }
.world-clock-report__head h2 { margin: .25rem 0; font: 600 1.2rem "Cinzel", serif; color: var(--red, #8c1d18); }
.world-clock-report__notice { font-style: italic; color: var(--muted, #6d5847); }
.world-clock-report__group { margin-top: .85rem; }
.world-clock-report__group h3 {
  font: 600 .74rem/1 "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #6d5847);
  margin-bottom: .3rem;
}
.world-clock-report__group ul { list-style: none; margin: 0; padding: 0; }
.world-clock-entry {
  display: flex;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(78, 48, 26, .1);
}
.world-clock-entry__icon img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.world-clock-entry__body { display: flex; flex-direction: column; gap: 1px; }
.world-clock-entry__body strong { font-weight: 600; }
.world-clock-entry__body strong a { color: inherit; }
.world-clock-entry__body span { font-size: .85rem; color: var(--muted, #6d5847); }
.world-clock-entry__body time { font-size: .72rem; color: var(--muted, #6d5847); opacity: .8; }
.world-clock-entry.is-warning strong { color: var(--red, #8c1d18); }
.world-clock-entry.is-notable strong { color: #7a5c2e; }