/* ============================================================
   Short Story Break: Site rules modal
   - shared by index.html and story.html
   ============================================================ */

html.ssb-modal-open,
body.ssb-modal-open{
  overflow: hidden;
}

/* Trigger row on reader page */
.rLegalRow{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 10px 0 18px;
}

/* Modal */
.ssbModal{
  position: fixed;
  inset: 0;
  z-index: 20000; /* above cookie banner */
  display:flex;
  align-items:center;
  justify-content:center;
}

.ssbModal[hidden]{
  display:none;
}

.ssbModalOverlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.ssbModalPanel{
  position: relative;
  width: min(980px, 92vw);
  max-height: min(84vh, 760px);
  overflow: auto;

  background: var(--card2, #f4f1e7);
  color: var(--text, #0b0b10);

  border: 1px solid var(--line2, rgba(0,0,0,.12));
  border-radius: 18px;
  box-shadow: var(--shadow, 0 18px 60px rgba(0,0,0,.35));
}

.ssbModalHead{
  position: sticky;
  top: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;

  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent);
  border-bottom: 1px solid var(--line2, rgba(0,0,0,.10));
  backdrop-filter: blur(8px);
}

html[data-theme="light"] .ssbModalHead{
  background: linear-gradient(180deg, rgba(11,11,16,.06), transparent);
}

.ssbModalTitle{
  margin:0;
  font-size: 18px;
  letter-spacing: .02em;
}

.ssbModalClose{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line2, rgba(0,0,0,.12));
  background: transparent;
  color: inherit;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  line-height: 1;
}

.ssbModalBody{
  padding: 14px 16px 6px;
  font-family: var(--ssbMincho, ui-serif);
  letter-spacing: .02em;
  line-height: 1.75;
  font-size: 14px;
}

.ssbModalBody h3{
  margin: 16px 0 8px;
  font-size: 15px;
}

.ssbModalBody ul{
  margin: 8px 0 10px 1.2em;
}

.ssbModalBody li{
  margin: 4px 0;
}

.ssbModalBody code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92em;
}

.ssbModalFoot{
  position: sticky;
  bottom: 0;
  display:flex;
  justify-content:flex-end;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line2, rgba(0,0,0,.10));
  background: linear-gradient(0deg, rgba(0,0,0,.08), transparent);
}

html[data-theme="light"] .ssbModalFoot{
  background: linear-gradient(0deg, rgba(11,11,16,.06), transparent);
}

.ssbModalOk{
  border: 1px solid var(--line2, rgba(0,0,0,.12));
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
}

.ssbModalClose:hover,
.ssbModalOk:hover{
  transform: translateY(-1px);
}

.ssbModalClose:active,
.ssbModalOk:active{
  transform: translateY(0);
}