/* ==========================================================
   Obey The Light — Event runtime component styles

   Static home for styles previously injected by:
   - event-layout-fixes.js
   - event-card-disclosures.js
   - oral-anal-intensity.js

   JavaScript owns behavior and DOM enhancement.
   CSS owns presentation.
   ========================================================== */

/* ==========================================================
   Standard Event layout and Nippleplay variants
   Migrated from event-layout-fixes.js
   ========================================================== */

/*
  Standard Events use two clean rows:
  Flicking / Slapping / Spanking
  Edging / Tasting / Milking

  Standard cards stretch to the tallest card in each row for a consistent grid.
*/
#eventsPanel
.event-grid[aria-label="Free Events"] {
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting {
  height: 100% !important;
}

.event-range-row {
  flex-wrap: wrap;
  min-width: 0;
}

.event-range-row > span {
  min-width: 0;
  flex: 1 1 88px;
}

/*
  Canonical Event Min/Max control.

  All ordinary Event range fields use exactly the same compact
  dimensions. Card width must never stretch these controls.
*/
#eventsPanel {
  --otl-event-range-field-width: 82px;
}

#eventsPanel .event-range-pair {
  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      var(--otl-event-range-field-width)
    ) !important;

  gap: 8px !important;

  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;

  flex: 0 0 auto !important;
  margin-left: auto !important;
}

#eventsPanel
.event-range-pair
> label {
  box-sizing: border-box !important;

  width:
    var(--otl-event-range-field-width)
    !important;

  min-width: 0 !important;

  max-width:
    var(--otl-event-range-field-width)
    !important;
}

#eventsPanel
.event-range-pair
input[type="number"] {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


/*
  Generated duration/repetition Events use an outer controls
  wrapper. That wrapper must also remain content-sized rather
  than expanding with the card.
*/
#eventsPanel .otl-event-range-controls {
  display: flex !important;
  align-items: flex-end !important;

  width: max-content !important;
  max-width: 100% !important;

  flex: 0 0 auto !important;

  margin-left: auto !important;
  gap: 10px !important;
}


/*
  Breathplay's unit belongs beside the Maximum input.
*/
#eventsPanel
.otl-event-range-row--breathplay
.otl-event-range-unit {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  align-self: flex-end !important;

  box-sizing: border-box !important;

  height:
    var(
      --otl-event-range-input-height,
      36px
    ) !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;
  white-space: nowrap;
}

.event-card-nippleplay .nippleplay-variants {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin-top: 4px !important;
  border-top: 0 !important;
}

.event-card-nippleplay .nippleplay-variant-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  align-content: start;
  gap: 10px !important;
  min-width: 0;
  min-height: 0;
  padding: 12px !important;
  border: 1px solid rgba(100, 116, 139, 0.26) !important;
  border-radius: 11px;
  background: rgba(2, 6, 23, 0.18);
}

.event-card-nippleplay .nippleplay-variant-toggle {
  width: 100%;
  min-width: 0;
}

.event-card-nippleplay .nippleplay-variant-chance {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: 7px !important;
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

.event-card-nippleplay .nippleplay-variant-chance > span:first-child {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
}

.event-card-nippleplay .nippleplay-variant-chance input {
  width: 64px !important;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  #eventsPanel
  .event-grid[aria-label="Free Events"] {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  #eventsPanel
  .event-grid[aria-label="Free Events"] {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}

@media (max-width: 920px) {
  .event-card-nippleplay .nippleplay-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .event-card-nippleplay .nippleplay-variants {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-card-nippleplay .nippleplay-variant-row {
    min-height: 0;
  }
}

/* ==========================================================
   Premium Event grid and advanced disclosures
   Migrated from event-card-disclosures.js
   ========================================================== */

/*
  Canonical Premium Event visual order.

  Use CSS Grid ordering rather than repeatedly moving DOM nodes.
  This remains stable even when Event cards are created by
  different extension scripts at different times.
*/
#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting {
  order: 999;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#chastityEnabledInput) {
  order: 13;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#fleshlightEnabledInput) {
  order: 3;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#mouthGagEnabledInput) {
  order: 8;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#oralEnabledInput) {
  order: 11;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#analEnabledInput) {
  order: 5;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#breathplayEnabledInput) {
  order: 12;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#punchingEnabledInput) {
  order: 1;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#fistingEnabledInput) {
  order: 4;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#inflatableEnabledInput) {
  order: 10;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#soundingEnabledInput) {
  order: 9;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#buttPlugEnabledInput) {
  order: 7;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#nippleplayEnabledInput) {
  order: 17;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#bondageEnabledInput) {
  order: 14;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#feminizationEnabledInput) {
  order: 16;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#humiliationEnabledInput) {
  order: 15;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#nippleClampsEnabledInput) {
  order: 2;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#penisPumpEnabledInput) {
  order: 18;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(#vibratorEnabledInput) {
  order: 6;
}


/*
  Premium Events use a predictable three-column layout.
  Every collapsed Event occupies one cell.
*/
#eventsPanel
.event-grid[aria-label="Premium Events"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-column: auto !important;
}

/*
  Opening Configure should only grow the Event card vertically.
  Keep the card in its existing grid column.
*/
#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting.otl-event-expanded {
  height: auto;
}

#eventsPanel .otl-event-advanced[hidden] {
  display: none !important;
}

#eventsPanel .otl-event-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 9px;
  color: #cbd5e1;
  background: rgba(2, 6, 23, .24);
  box-shadow: none;
  font-size: .76rem;
  font-weight: 800;
  text-align: left;
}

#eventsPanel .otl-event-disclosure:not(:disabled):hover {
  border-color: rgba(167, 139, 250, .34);
  background: rgba(76, 29, 149, .10);
  transform: none;
}

/*
  Configure belongs to the Event master toggle. When the Event is
  off (or its master toggle is otherwise locked), every Configure
  disclosure uses the same quiet disabled treatment.
*/
#eventsPanel
.event-setting
.otl-event-disclosure:disabled {
  opacity: .46 !important;
  cursor: not-allowed !important;
  color: #64748b !important;
  border-color:
    rgba(100, 116, 139, .16) !important;
  background:
    rgba(2, 6, 23, .14) !important;
  box-shadow: none !important;
  transform: none !important;
}

#eventsPanel
.event-setting
.otl-event-disclosure:disabled
.otl-event-disclosure-chevron {
  opacity: .62;
}

#eventsPanel .otl-event-disclosure-label {
  min-width: 0;
}

#eventsPanel .otl-event-disclosure-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

#eventsPanel
.otl-event-disclosure[aria-expanded="true"]
.otl-event-disclosure-chevron {
  transform: rotate(225deg);
}

#eventsPanel .otl-event-expanded {
  min-height: 0;
}

#eventsPanel .otl-event-expanded .otl-event-advanced {
  margin-top: 12px;
}

@media (max-width: 900px) {
  #eventsPanel
  .event-grid[aria-label="Premium Events"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  #eventsPanel
  .event-grid[aria-label="Premium Events"] {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  #eventsPanel .otl-event-disclosure-chevron {
    transition: none;
  }
}

/* ==========================================================
   Oral and Anal advanced controls
   Migrated from oral-anal-intensity.js
   ========================================================== */

.otl-depth-pace-settings{
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid rgba(148,163,184,.18);
}
.otl-depth-pace-body,.otl-variant-section,.otl-pace-table,.otl-pace-depth-row{
  display:grid;
}
.otl-depth-pace-body{gap:20px}
.otl-variant-section{gap:12px}
.otl-variant-section+.otl-variant-section{
  padding-top:18px;
  border-top:1px solid rgba(148,163,184,.14);
}
.otl-variant-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.otl-variant-heading>div{display:grid;gap:3px}
.otl-variant-heading strong{color:#f8fafc;font-size:.82rem}
.otl-variant-heading small,.otl-variant-note{color:#64748b;font-size:.72rem;line-height:1.45}
.otl-variant-total{
  flex:0 0 auto;
  color:#94a3b8;
  font-size:.7rem;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.otl-variant-total.normalized{color:#fbbf24}
.otl-variant-total.invalid{color:#fca5a5}
.otl-depth-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.otl-pace-table{gap:11px}
.otl-pace-depth-row{
  gap:10px;
  padding:12px 13px;
  border:1px solid rgba(100,116,139,.22);
  border-radius:10px;
  background:rgba(15,23,42,.34);
}
.otl-pace-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.otl-variant-weight{
  display:grid;
  gap:6px;
  min-width:0;
  color:#94a3b8;
  font-size:.72rem;
}
#eventsPanel .event-grid[aria-label="Premium Events"] .otl-variant-weight .probability-input{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100% !important;
  max-width:none !important;
  min-width:0;
  min-height:50px !important;
  padding:7px 10px !important;
}

#eventsPanel .event-grid[aria-label="Premium Events"] .otl-variant-weight .probability-input input[type=number]{
  box-sizing:border-box;
  display:block;
  width:100% !important;
  max-width:none !important;
  min-width:0;
  min-height:34px !important;
  height:34px !important;
  padding:7px 10px !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  color:var(--text) !important;
  background:rgba(2,6,23,.65) !important;
  box-shadow:none !important;
  font-size:.95rem;
  line-height:1.2 !important;
  overflow:visible !important;
}

#eventsPanel .event-grid[aria-label="Premium Events"] .otl-variant-weight .probability-input > span{
  flex:0 0 auto;
  color:#64748b;
  font-size:.82rem;
}
.otl-depth-pace-settings.otl-variant-locked{opacity:.58}
.otl-depth-pace-settings :disabled{cursor:not-allowed}
@media(max-width:680px){
  .otl-depth-grid,.otl-pace-grid{grid-template-columns:1fr}
  .otl-variant-heading{align-items:stretch;flex-direction:column}
}

/* ---------- Canonical Event range-unit alignment ---------- */

/*
  Duration units such as seconds/minutes align with the
  corresponding Min/Max input rather than the label row.
*/
#eventsPanel
.otl-event-range-controls
> .otl-advanced-unit {
  flex: 0 0 auto !important;
  align-self: flex-end !important;

  margin: 0 !important;
  padding: 0 0 9px !important;

  line-height: 1.45 !important;
  white-space: nowrap !important;
}

/*
  Timed Current States keep the Event icon as the primary
  indicator and place the remaining duration directly beneath it.
*/
.otl-current-state--timed {
  width: 42px;
  height: auto;
  min-height: 42px;
  padding: 6px 6px 5px;
  gap: 4px;
}

.otl-current-state-countdown {
  display: block;
  min-width: 0;
  color: #e2e8f0;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/*
  Oral / Anal Duration selector needs breathing room before
  whichever Min/Max range becomes active beneath it.
*/
#eventsPanel .otl-oral-anal-completion {
  margin-bottom: 14px;
}

#eventsPanel
.otl-oral-anal-random-duration[hidden] {
  display: none !important;
}


/* ---------- Event range vertical spacing ---------- */

/*
  Keep stacked Min/Max groups visually distinct. Without this,
  the Minimum / Maximum labels of the following range can appear
  attached to the inputs from the range above.
*/
#eventsPanel
[id$="RandomDurationWrap"]
+ .event-range-row,

#eventsPanel
[id$="RandomDurationWrap"]
+ .otl-event-range-row,

#eventsPanel
.event-range-row
+ .event-range-row,

#eventsPanel
.otl-event-range-row
+ .event-range-row,

#eventsPanel
.event-range-row
+ .otl-event-range-row,

#eventsPanel
.otl-event-range-row
+ .otl-event-range-row {
  margin-top: 18px !important;
}

/*
  Give Minimum / Maximum labels a clearer relationship to
  the inputs directly beneath them.
*/
#eventsPanel
.event-range-pair
> label {
  display: grid !important;
  gap: 7px !important;
  align-content: start;
}


/* ---------- Legacy Random-duration range spacing ---------- */

/*
  Sounding, Ball Punching, and Anal Fisting use the older
  repetition-card structure. Give the Random-duration range
  room beneath its selector and clearly separate the
  Repetitions range beneath it.
*/
#soundingRandomDurationWrap,
#punchingRandomDurationWrap,
#fistingRandomDurationWrap {
  margin-top: 18px !important;
}

#soundingRandomDurationWrap + .event-range-row,
#punchingRandomDurationWrap + .event-range-row,
#fistingRandomDurationWrap + .event-range-row {
  margin-top: 28px !important;
}