/*******************/
/* COLOR PALETTE   */
/*******************/
:root {
  --bg: burlywood; /* page background            */
  --bg1: goldenrod; /* controls, cypher panel     */
  --bg2: #2563eb; /* button background          */
  --bg2-hover: #1d4ed8; /* button hover               */
  --bg-hard: black; /* tooltip background         */
  --bg-result: #f9fafb; /* cypher result panel        */
  --border: #000; /* column / box borders       */
  --fg: #000; /* body text                  */
  --fg1: white; /* button & tooltip text      */
  --fg4: #4b5563; /* muted text (break items)   */
}

html[data-theme="dark"] {
  --bg: #282828; /* page background            */
  --bg1: #3c3836; /* controls, cypher panel     */
  --bg2: #504945; /* button background          */
  --bg2-hover: #665c54; /* button hover               */
  --bg-hard: #1d2021; /* tooltip background         */
  --bg-result: #32302f; /* cypher result panel        */
  --border: #504945; /* column / box borders       */
  --fg: #ebdbb2; /* body text                  */
  --fg1: #ebdbb2; /* button & tooltip text      */
  --fg4: #a89984; /* muted text (break items)   */
}

.versicle::before {
  /* used for versicle - response clauses */
  content: "℣.";
}
.response::before {
  content: "℟.";
}
.versicle,
.response,
.nomen {
  /* used for versicle - response clauses and NAME inputs in the texts*/
  color: red;
  font-style: italic;
}
.signum-crucis::before {
  content: "✠";
  color: red;
}
.labia-crucis::before {
  content: "+";
  color: red;
}
.roman {
  /* used for general separation between parts */
  color: red;
  font-weight: bold;
}
.romanP {
  /* used for general separation between parts for optional stuff*/
  color: purple;
  font-weight: bold;
}
.inresponse {
  /* used for inline response and comments*/
  color: crimson;
  font-style: italic;
}
.note {
  /* used for optional text, especially if the text is in [] brackets */
  color: purple;
  font-style: italic;
}
.focus {
  /* used for prayers that are commonly known and thus don't require full text e.g. Ave Maria*/
  color: deeppink;
  font-weight: bold;
}
sup {
  /* used to link bilingual texts for easier navigation */
  color: red;
  font-weight: bold;
}

.marginT {
  padding-top: 1em;
} /* used to add space between divs */

.col1 {
  grid-column: 1;
}
.col2 {
  grid-column: 2;
}
.col3 {
  grid-column: 3;
}

.one-column {
  page-break-inside: avoid;
  align-items: start;
  position: relative;
  margin-left: calc(max(0px, 50vw - 20em));
  margin-right: calc(max(0px, 50vw - 20em));
  border-bottom: 2px solid var(--border);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}
.two-column {
  page-break-inside: avoid;
  grid-template-columns: 1fr 1fr;
  display: grid;
  align-items: start;
  position: relative;
  margin-left: calc(max(0px, 50vw - 30em));
  margin-right: calc(max(0px, 50vw - 30em));
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}
.three-column {
  page-break-inside: avoid;
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
  align-items: start;
  position: relative;
  margin-left: calc(max(0px, 50vw - 40em));
  margin-right: calc(max(0px, 50vw - 40em));
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}
.one-column .box,
.two-column .box,
.three-column .box {
  display: contents;
}
.one-column .box > div,
.two-column .box > div,
.three-column .box > div {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding-right: 0.5em;
  padding-left: 0.5em;
  min-width: 0;
  overflow-wrap: break-word;
}

.one-column .box:nth-child(1) > div,
.two-column .box:nth-child(2) > div,
.three-column .box:nth-child(3) > div {
  border-right: none;
}
.one-column .box:nth-child(1) > div,
.two-column .box:nth-child(1) > div,
.three-column .box:nth-child(1) > div {
  border-left: none;
}
.three-column .box:nth-child(2) > div,
.three-column .box:nth-child(3) > div,
.two-column .box:nth-child(2) > div {
  margin-left: -1px;
}

/* Dynamic column switching: JS adds these classes to track first/last visible box */
/* .box.first-col > div { border-left: none !important; margin-left: 0 !important; } */
/* .box.last-col > div { border-right: none !important; } */

:is(.one-column, .two-column, .three-column) :is(h2, h3, h4, p, ul, ol) {
  margin: 0;
  padding: 0.3em 0;
}
:is(.one-column, .two-column, .three-column) :is(h1) {
  margin: 0;
  padding: 0.3em 0;
  text-align: center;
}

.tooltip1,
.tooltip2,
.tooltip3 {
  visibility: hidden;
  padding: 1em 1em;
  background-color: var(--bg-hard);
  color: var(--fg1);
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  left: 0;
  border-radius: 1em;
  transition: visibility 0s 0s;
}

.col1:hover .tooltip1.active,
.col2:hover .tooltip1.active,
.col3:hover .tooltip1.active,
.col1:hover .tooltip2.active,
.col2:hover .tooltip2.active,
.col3:hover .tooltip2.active,
.col1:hover .tooltip3.active,
.col2:hover .tooltip3.active,
.col3:hover .tooltip3.active {
  visibility: visible;
  transition-delay: 0s;
}
body.tooltips-disabled .tooltip1.active {
  visibility: hidden !important;
}
.text-content1,
.text-content2,
.text-content3 {
  display: none;
}
.text-content1.active,
.text-content2.active,
.text-content3.active {
  display: inline;
}

html {
  background-color: var(--bg);
}
body {
  font-family: "Georgia", serif;
  background-color: var(--bg);
  color: var(--fg);
}
.controls1,
.controls2,
.controls3 {
  background: var(--bg1);
  width: 10em;
  padding: 20px;
  border-radius: 10px;
  position: fixed;
  overflow-y: scroll;
}
.controls1 {
  margin-left: calc(50vw - 30em - 45px);
}
.controls2 {
  margin-left: calc(50vw - 40em - 45px);
}
.controls3 {
  margin-left: calc(50vw - 50em - 45px);
}
.control-group {
  display: flex;
  flex-direction: column;
}

.cypherContainer {
  background: var(--bg1);
  width: 20em;
  padding: 20px;
  margin-left: calc(50vw + 20em - 10px);
  border-radius: 10px;
  position: fixed;
  overflow-y: scroll;
}
select,
textarea {
  width: 100%;
  margin-bottom: 10px;
  max-width: calc(100% - 10px);
}
textarea {
  height: 10vh;
}
button {
  width: 100%;
  background: var(--bg2);
  color: var(--fg1);
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}
button:hover {
  background: var(--bg2-hover);
}
.cypherResult {
  margin-top: 20px;
  padding: 15px;
  background: var(--bg-result);
  border-radius: 6px;
}
.breakdown {
  max-height: 160px;
  overflow-y: auto;
}
.break-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--fg4);
  font-family: monospace;
}

/* Smooth theme transition */
html,
body,
.controls1,
.controls2,
.controls3,
.cypherContainer {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

[data-theme="dark"] {
  & body {
    background-color: var(--bg);
    color: var(--fg);
  }

  & .controls1,
  & .controls2,
  & .controls3,
  & .cypherContainer {
    background: var(--bg1);
    color: var(--fg1);
  }

  & button {
    background: var(--bg2);
    color: #c9a02a;
    &:hover {
      background: var(--bg2-hover);
    }
  }

  & .one-column,
  & .two-column,
  & .three-column {
    border-color: var(--border);

    & .box > div {
      border-color: var(--border);
    }
  }

  & .tooltip1,
  & .tooltip2,
  & .tooltip3 {
    background-color: var(--bg-hard);
    color: var(--fg1);
  }

  & .cypherResult {
    background: var(--bg-result);
  }
  & .break-item {
    color: var(--fg4);
  }
}

/* Definition icons and popup modal */
.def-icon {
  display: inline;
  width: auto;
  background: none;
  border: none;
  color: #8b6914;
  cursor: pointer;
  font-size: 0.75em;
  padding: 0.25em;
  vertical-align: super;
  font-family: inherit;
  opacity: 0.85;
  transition: opacity 0.2s;
}
html[data-theme="dark"] .def-icon {
  color: #c9a02a;
}
.def-icon--dictionary {
  font-style: italic;
}
.def-icon:hover {
  background: none;
  opacity: 1;
}
.def-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.def-modal-box {
  background: var(--bg-hard);
  color: var(--fg1);
  padding: 1.5em;
  border-radius: 0.75em;
  max-width: 32em;
  width: 90%;
  position: relative;
  line-height: 1.5;
}
.def-modal-close {
  position: absolute;
  top: 0.4em;
  right: 0.6em;
  background: none;
  border: none;
  color: var(--fg1);
  font-size: 1.1em;
  cursor: pointer;
  width: auto;
  padding: 0.1em 0.3em;
  font-weight: bold;
}
.def-modal-close:hover {
  background: none;
  opacity: 0.7;
}

.align1,
.align2,
.align3,
.align4,
.align5,
.align6,
.align7,
.align8,
.align9,
.align10,
.align11,
.align12,
.align13,
.align14,
.align15,
.align16,
.align17,
.align18,
.align19,
.align20,
.align21,
.align22,
.align23,
.align24,
.align25,
.align26,
.align27,
.align28,
.align29,
.align30,
.align31,
.align32,
.align33,
.align34,
.align35,
.align36,
.align37,
.align38,
.align39,
.align40,
.align41,
.align42,
.align43,
.align44,
.align45,
.align46,
.align47,
.align48,
.align49,
.align50,
.align51,
.align52,
.align53,
.align54,
.align55,
.align56,
.align57,
.align58,
.align59,
.align60,
.align61,
.align62,
.align63,
.align64,
.align65,
.align66,
.align67,
.align68,
.align69,
.align70,
.align71,
.align72,
.align73,
.align74,
.align75,
.align76,
.align77,
.align78,
.align79,
.align80,
.align81,
.align82,
.align83,
.align84,
.align85,
.align86,
.align87,
.align88,
.align89,
.align90,
.align91,
.align92,
.align93,
.align94,
.align95,
.align96,
.align97,
.align98,
.align99,
.align100 {
  grid-row: auto;
  position: relative;
}

@media (max-width: 1050px) {
  .controls1,
  .controls2,
  .controls3 {
    position: relative;
    margin-left: auto !important;
    margin-right: auto;
    width: auto;
    max-width: 20em;
    box-sizing: border-box;
    margin-bottom: 1em;
  }
}

.align1 {
  grid-row: 1;
}
.align2 {
  grid-row: 2;
}
.align3 {
  grid-row: 3;
}
.align4 {
  grid-row: 4;
}
.align5 {
  grid-row: 5;
}
.align6 {
  grid-row: 6;
}
.align7 {
  grid-row: 7;
}
.align8 {
  grid-row: 8;
}
.align9 {
  grid-row: 9;
}
.align10 {
  grid-row: 10;
}
.align11 {
  grid-row: 11;
}
.align12 {
  grid-row: 12;
}
.align13 {
  grid-row: 13;
}
.align14 {
  grid-row: 14;
}
.align15 {
  grid-row: 15;
}
.align16 {
  grid-row: 16;
}
.align17 {
  grid-row: 17;
}
.align18 {
  grid-row: 18;
}
.align19 {
  grid-row: 19;
}
.align20 {
  grid-row: 20;
}
.align21 {
  grid-row: 21;
}
.align22 {
  grid-row: 22;
}
.align23 {
  grid-row: 23;
}
.align24 {
  grid-row: 24;
}
.align25 {
  grid-row: 25;
}
.align26 {
  grid-row: 26;
}
.align27 {
  grid-row: 27;
}
.align28 {
  grid-row: 28;
}
.align29 {
  grid-row: 29;
}
.align30 {
  grid-row: 30;
}
.align31 {
  grid-row: 31;
}
.align32 {
  grid-row: 32;
}
.align33 {
  grid-row: 33;
}
.align34 {
  grid-row: 34;
}
.align35 {
  grid-row: 35;
}
.align36 {
  grid-row: 36;
}
.align37 {
  grid-row: 37;
}
.align38 {
  grid-row: 38;
}
.align39 {
  grid-row: 39;
}
.align40 {
  grid-row: 40;
}
.align41 {
  grid-row: 41;
}
.align42 {
  grid-row: 42;
}
.align43 {
  grid-row: 43;
}
.align44 {
  grid-row: 44;
}
.align45 {
  grid-row: 45;
}
.align46 {
  grid-row: 46;
}
.align47 {
  grid-row: 47;
}
.align48 {
  grid-row: 48;
}
.align49 {
  grid-row: 49;
}
.align50 {
  grid-row: 50;
}
.align51 {
  grid-row: 51;
}
.align52 {
  grid-row: 52;
}
.align53 {
  grid-row: 53;
}
.align54 {
  grid-row: 54;
}
.align55 {
  grid-row: 55;
}
.align56 {
  grid-row: 56;
}
.align57 {
  grid-row: 57;
}
.align58 {
  grid-row: 58;
}
.align59 {
  grid-row: 59;
}
.align60 {
  grid-row: 60;
}
.align61 {
  grid-row: 61;
}
.align62 {
  grid-row: 62;
}
.align63 {
  grid-row: 63;
}
.align64 {
  grid-row: 64;
}
.align65 {
  grid-row: 65;
}
.align66 {
  grid-row: 66;
}
.align67 {
  grid-row: 67;
}
.align68 {
  grid-row: 68;
}
.align69 {
  grid-row: 69;
}
.align70 {
  grid-row: 70;
}
.align71 {
  grid-row: 71;
}
.align72 {
  grid-row: 72;
}
.align73 {
  grid-row: 73;
}
.align74 {
  grid-row: 74;
}
.align75 {
  grid-row: 75;
}
.align76 {
  grid-row: 76;
}
.align77 {
  grid-row: 77;
}
.align78 {
  grid-row: 78;
}
.align79 {
  grid-row: 79;
}
.align80 {
  grid-row: 80;
}
.align81 {
  grid-row: 81;
}
.align82 {
  grid-row: 82;
}
.align83 {
  grid-row: 83;
}
.align84 {
  grid-row: 84;
}
.align85 {
  grid-row: 85;
}
.align86 {
  grid-row: 86;
}
.align87 {
  grid-row: 87;
}
.align88 {
  grid-row: 88;
}
.align89 {
  grid-row: 89;
}
.align90 {
  grid-row: 90;
}
.align91 {
  grid-row: 91;
}
.align92 {
  grid-row: 92;
}
.align93 {
  grid-row: 93;
}
.align94 {
  grid-row: 94;
}
.align95 {
  grid-row: 95;
}
.align96 {
  grid-row: 96;
}
.align97 {
  grid-row: 97;
}
.align98 {
  grid-row: 98;
}
.align99 {
  grid-row: 99;
}
.align100 {
  grid-row: 100;
}