/* Declare layer order first - unlayered styles will have highest priority */
@layer base;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('pygments.css') layer(base);

@layer base {

/* Page-level background for dark mode */
body {
  background: var(--surface-page);
  margin: 0;
  padding: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

:root {

  /* General */
  --side-padding: 6.5em;

  /* Halmos */
  --halmos-side-length: 0.5rem;
  --halmos--ellipsis-width: 1em;

  /* Colors -- Primitive */
  --gray-1000: #000000;
  --gray-950: #13181B;
  --gray-900: #3C4952;
  --gray-800: #51636F;
  --gray-700: #688090;
  --gray-600: #8B9FAD;
  --gray-500: #A9B7C1;
  --gray-400: #B3BFC7;
  --gray-300: #C2CCD3;
  --gray-200: #DAE1E5;
  --gray-100: #EDF0F2;
  --gray-75: #F5F7F8;
  --gray-50: #FCFEFE;
  --gray-0: #FFFFFF;

  --blue-950: #082C49;
  --blue-900: #0C456E;
  --blue-800: #075487;
  --blue-700: #0361A1;
  --blue-600: #027AC7;
  --blue-500: #0E9AE9;
  --blue-400: #38B4F8;
  --blue-300: #7DCDFC;
  --blue-200: #BAE3FD;
  --blue-100: #E0F1FE;
  --blue-50: #F0F8FF;

  --purple-950: #370B60;
  --purple-900: #522182;
  --purple-800: #6427A2;
  --purple-700: #7629C7;
  --purple-600: #8B3BE2;
  --purple-500: #AD71F2;
  --purple-400: #BB89F7;
  --purple-300: #D5B7FB;
  --purple-200: #E7D7FD;
  --purple-100: #F2E9FE;
  --purple-50: #FAF5FF;

  --green-950: #072C2B;
  --green-900: #174A46;
  --green-800: #165954;
  --green-700: #157067;
  --green-600: #158C7F;
  --green-500: #1FB5A2;
  --green-400: #37CAB6;
  --green-300: #66E2CC;
  --green-200: #9FF0E0;
  --green-100: #CFF8EE;
  --green-50: #F1FCFA;

  --red-950: #450A0A;
  --red-900: #7F1D1E;
  --red-800: #991B1C;
  --red-700: #B81D1E;
  --red-600: #DB2728;
  --red-500: #EF4B4C;
  --red-400: #F87172;
  --red-300: #FCA5A6;
  --red-200: #FECACA;
  --red-100: #FEE2E2;
  --red-50: #FEF2F2;

  --orange-950: #421708;
  --orange-900: #7A3214;
  --orange-800: #973A15;
  --orange-700: #BE4A10;
  --orange-600: #E56211;
  --orange-500: #F5862B;
  --orange-400: #F79940;
  --orange-300: #FABF77;
  --orange-200: #FCDAAC;
  --orange-100: #FEEFD6;
  --orange-50: #FFF8ED;

  --yellow-950: #481E00;
  --yellow-900: #7C3C0B;
  --yellow-800: #984908;
  --yellow-700: #BB5F02;
  --yellow-600: #E28800;
  --yellow-500: #F5AB00;
  --yellow-400: #FFD31B;
  --yellow-300: #FFE446;
  --yellow-200: #FFF285;
  --yellow-100: #FFF8C5;
  --yellow-50: #FFFDEA;

  --pink-950: #500724;
  --pink-900: #831843;
  --pink-800: #9d174d;
  --pink-700: #be185d;
  --pink-600: #db2777;
  --pink-500: #ec4899;
  --pink-400: #f472b6;
  --pink-300: #f9a8d4;
  --pink-200: #fbcfe8;
  --pink-100: #fce7f3;
  --pink-50:  #fdf2f8;

  /* Colors -- Alias */
  --black: var(--gray-1000);
  --almost-black: var(--gray-950);
  --extra-dark: var(--gray-900);
  --dark: var(--gray-700);
  --medium: var(--gray-500);
  --light: var(--gray-300);
  --extra-light: var(--gray-100);
  --almost-white: var(--gray-50);
  --white: var(--gray-0);

  --primary-950: var(--blue-950);
  --primary-900: var(--blue-900);
  --primary-800: var(--blue-800);
  --primary-700: var(--blue-700);
  --primary-600: var(--blue-600);
  --primary-500: var(--blue-500);
  --primary-400: var(--blue-400);
  --primary-300: var(--blue-300);
  --primary-200: var(--blue-200);
  --primary-100: var(--blue-100);
  --primary-50: var(--blue-50);

  --secondary-950: var(--purple-950);
  --secondary-900: var(--purple-900);
  --secondary-800: var(--purple-800);
  --secondary-700: var(--purple-700);
  --secondary-600: var(--purple-600);
  --secondary-500: var(--purple-500);
  --secondary-400: var(--purple-400);
  --secondary-300: var(--purple-300);
  --secondary-200: var(--purple-200);
  --secondary-100: var(--purple-100);
  --secondary-50: var(--purple-50);

  --information-950: var(--blue-950);
  --information-900: var(--blue-900);
  --information-800: var(--blue-800);
  --information-700: var(--blue-700);
  --information-600: var(--blue-600);
  --information-500: var(--blue-500);
  --information-400: var(--blue-400);
  --information-300: var(--blue-300);
  --information-200: var(--blue-200);
  --information-100: var(--blue-100);
  --information-50: var(--blue-50);

  --success-950: var(--green-950);
  --success-900: var(--green-900);
  --success-800: var(--green-800);
  --success-700: var(--green-700);
  --success-600: var(--green-600);
  --success-500: var(--green-500);
  --success-400: var(--green-400);
  --success-300: var(--green-300);
  --success-200: var(--green-200);
  --success-100: var(--green-100);
  --success-50: var(--green-50);

  --error-950: var(--red-950);
  --error-900: var(--red-900);
  --error-800: var(--red-800);
  --error-700: var(--red-700);
  --error-600: var(--red-600);
  --error-500: var(--red-500);
  --error-400: var(--red-400);
  --error-300: var(--red-300);
  --error-200: var(--red-200);
  --error-100: var(--red-100);
  --error-50: var(--red-50);

  /* Colors -- Semantic */
  --surface-page: var(--white);
  --surface-primary: var(--almost-white);
  --surface-hover: var(--gray-75);
  --surface-information: var(--information-50);
  --surface-success: var(--success-50);
  /* --surface-warning: var(); */
  --surface-error: var(--error-50);
  --surface-action: var(--primary-500);
  --surface-action-hover: var(--primary-600);
  --surface-disabled: var(--gray-200);
  --surface-hint: var(--information-200);

  --border-primary: var(--gray-200);
  --border-information: var(--information-100);
  --border-success: var(--success-100);
  --border-warning: var(--warning-100);
  --border-error: var(--error-100);
  --border-action: var(--information-500);
  --border-action-hover: var(--information-600);
  --handrail-default: var(--border-primary);
  --handrail-active: var(--border-action);

  --link-default: var(--primary-600);
  --link-hover: var(--primary-500);

  --text-body: var(--extra-dark);
  --text-disabled: var(--gray-400);
  --text-keyword: var(--primary-700);
  --text-hilite-bg: var(--secondary-200);
  --text-action: var(--primary-600);
  --text-action-hover: var(--primary-600);
  --text-error: var(--error-500);

  --icon-information: var(--information-500);
  --icon-error: var(--error-500);
  --icon-action: var(--information-600);

  /* Type */
  --body-line-height: 1.5;
  --header-line-height: 1.25;
  --h1-size: 2.000rem;
  --h2-size: 1.750rem;
  --h3-size: 1.500rem;
  --h4-size: 1.375rem;
  --h5-size: 1.250rem;
  --h6-size: 1.000rem;
  --font-size: 100%;
  --weight-bold: 700;
  --weight-semi: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;

  /* Borders */
  --border-thick: 6px;
  --border-med: 4px;
  --border-thin: 2px;
  --border-extrathin: 1px;

  /* Shadows */
  --shadow-strong: 0px 1px 2px rgba(0, 0, 0, 30%);
  --shadow-soft: 0px 2px 6px rgba(0, 0, 0, 15%);

  /* Transitions */
  --transition-bg-color: background-color 0.1s ease;
  --transition-bd-color: border-color 0.1s ease;

}

.dark-theme {
  /* Inverted from light mode */
  --gray-0: #13181B;
  --gray-50: #1C242A;
  --gray-75: #232D35;
  --gray-100: #2A3740;
  --gray-200: #38454F;
  --gray-300: #475662;
  --gray-400: #566877;
  --gray-500: #67798A;
  --gray-600: #7A8A99;
  --gray-700: #8C9BA8;
  --gray-800: #A0ACB7;
  --gray-900: #B5BFC8;
  --gray-950: #CED6DC;
  --gray-1000: #E8EDF0;

  --blue-50: #082C49;
  --blue-100: #0A375A;
  --blue-200: #0D446D;
  --blue-300: #0F5586;
  --blue-400: #1266A0;
  --blue-500: #1577BA;
  --blue-600: #1A8CD4;
  --blue-700: #2BA1EA;
  --blue-800: #55B5F1;
  --blue-900: #84CAF7;
  --blue-950: #C2E3FD;

  --purple-50: #2A0D46;
  --purple-100: #341358;
  --purple-200: #411A6C;
  --purple-300: #4D2181;
  --purple-400: #5A2997;
  --purple-500: #6831AD;
  --purple-600: #7A3BC7;
  --purple-700: #9059D7;
  --purple-800: #A77CE4;
  --purple-900: #C5A5EF;
  --purple-950: #E2D2F9;

  --green-50: #072C2B;
  --green-100: #0B3937;
  --green-200: #0F4643;
  --green-300: #135452;
  --green-400: #176260;
  --green-500: #1B706E;
  --green-600: #20847F;
  --green-700: #279D96;
  --green-800: #37B6AC;
  --green-900: #5DCFC5;
  --green-950: #A0E8DD;

  --red-50: #450A0A;
  --red-100: #55110F;
  --red-200: #671715;
  --red-300: #7A1E1B;
  --red-400: #8E2522;
  --red-500: #A32E29;
  --red-600: #B73932;
  --red-700: #CE4D45;
  --red-800: #DB6C64;
  --red-900: #EB9791;
  --red-950: #F7C5C1;

  --orange-50: #421708;
  --orange-100: #51200D;
  --orange-200: #632913;
  --orange-300: #753218;
  --orange-400: #873C1E;
  --orange-500: #9A4724;
  --orange-600: #B5562B;
  --orange-700: #D06A37;
  --orange-800: #E58753;
  --orange-900: #F2B285;
  --orange-950: #FAD7B9;

  --surface-page: var(--gray-0);
  --surface-primary: var(--gray-50);
  --surface-hover: var(--gray-100);
  --surface-information: var(--blue-100);
  --surface-success: var(--green-100);
  --surface-error: var(--red-100);
  --surface-action: var(--blue-600);
  --surface-action-hover: var(--blue-500);
  --surface-disabled: var(--gray-300);
  --surface-hint: var(--blue-300);

  --border-primary: var(--gray-300);
  --border-information: var(--blue-300);
  --border-success: var(--green-300);
  --border-warning: var(--orange-300);
  --border-error: var(--red-300);
  --border-action: var(--blue-500);
  --border-action-hover: var(--blue-400);
  --handrail-default: var(--border-primary);
  --handrail-active: var(--border-action);

  --link-default: var(--blue-500);
  --link-hover: var(--blue-400);

  --text-body: var(--gray-950);
  --text-disabled: var(--gray-600);
  --text-keyword: var(--blue-600);
  --text-hilite-bg: var(--purple-300);
  --text-action: var(--blue-500);
  --text-action-hover: var(--blue-400);
  --text-error: var(--red-500);

  --icon-information: var(--blue-500);
  --icon-error: var(--red-500);
  --icon-action: var(--blue-500);
}


/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}


/* General utilities */
.manuscriptwrapper {
  .error {background-color: var(--error-100);}
  .node-with-no-class {background-color: var(--error-100);}
  .reference.unknown {background-color: var(--error-100);}
  .hide {display: none !important;}
}


/* Outermost wrapper */
.manuscriptwrapper {

  /* Default */
  border-radius: 8px;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 var(--side-padding) 0 var(--side-padding);
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--font-size);
  font-weight: var(--weight-regular);
  line-height: var(--body-line-height);
  background: var(--surface-page);
  color: var(--extra-dark);
  transition: background 0.3s ease, color 0.3s ease;

  /* Outermost wrapper when the viewport is narrow */
  &.wrapper-narrow {
    margin: 2.5em 15em 2.5em auto;
  }

  /* Outermost wrapper when the the manuscript is embedded in another page */
  &.embedded {
    margin: 0;
    padding-inline: 1.5rem;
    box-shadow: unset;
    border-radius: 0;
  }

}


/* Widths */
.manuscriptwrapper {
  width: 100%;
  max-width: 960px;

  & > .manuscript {
    width: 100%;
  }

  & > .manuscript section {
    width: 100%;
  }

  & > .manuscript section .hr {
    width: 100%;
  }

  /* Depth 0: direct child of section */
  & > .manuscript section .hr .hr-content-zone {
    width: calc(100% - 96px);
  }

  /* Depth 1: nested one level */
  & > .manuscript section .hr .hr .hr-content-zone {
    width: calc(100% - 192px);
  }

  /* Depth 2: nested two levels */
  & > .manuscript section .hr .hr .hr .hr-content-zone {
    width: calc(100% - 288px);
  }

  /* Depth 3: nested three levels */
  & > .manuscript section .hr .hr .hr .hr .hr-content-zone {
    width: calc(100% - 384px);
  }

  /* hr-info-zone positioning at each depth to keep numbers in fixed column */
  & > .manuscript section .hr .hr.hr-offset > .hr-info-zone {
    left: 100%;
  }

  & > .manuscript section .hr .hr .hr.hr-offset > .hr-info-zone {
    left: calc(100% - 24px);
  }

  & > .manuscript section .hr .hr .hr .hr.hr-offset > .hr-info-zone {
    left: calc(100% + 48px);
  }

}



/* Tooltipster styles */
.tooltipster-sidetip.tooltipster-shadow.tooltipster-shadow-rsm {

  .tooltipster-box {
    background: var(--surface-page);
    border-radius: 16px;
    border: var(--border-thin) solid var(--border-primary);
  }

  .tooltipster-arrow-border {
    border-top-color: var(--border-primary);
    border-bottom-color: var(--border-primary);
  }

  .tooltipster-arrow-background {
    border-top-color: var(--surface-page);
    border-bottom-color: var(--surface-page);
  }

  .tooltipster-content {
    background: var(--surface-page);
    color: var(--extra-dark);
    border-radius: 16px;

    .manuscriptwrapper {
      padding: 0 1rem 0 1rem;

      /* .paragraph {margin-block-end: 0.5rem !important}; */

    }

  }

}


/* Headings */
.manuscriptwrapper {

  h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    line-height: var(--header-line-height);
  }

  h1 {
    font-size: var(--h1-size);
    font-weight: var(--weight-bold);
  }

  h2 {
    font-size: var(--h2-size);
    font-weight: var(--weight-semi);
  }

  h3 {
    font-size: var(--h3-size);
    font-weight: var(--weight-medium);
  }

  h4 {
    font-size: var(--h4-size);
    font-weight: var(--weight-medium);
  }

  h5 {
    font-size: var(--h5-size);
    font-weight: var(--weight-regular);
  }

  /* Margins around the heading but still inside the handrail */
  h1 {margin: calc(var(--h1-size) * 0.75) 0;}
  h2 {margin: calc(var(--h2-size) * 0.75) 0;}
  h3 {margin: calc(var(--h3-size) * 0.75) 0;}
  h4 {margin: calc(var(--h4-size) * 0.75) 0;}
  h5 {margin: calc(var(--h5-size) * 0.75) 0;}

  /* Margins around sections (before headings and after the last paragraph) */
  section {
    &.level-1 {margin-block: calc(var(--h1-size) * 1.5);}
    &.level-2 {margin-block: calc(var(--h2-size) * 1.5);}
    &.level-3 {margin-block: calc(var(--h3-size) * 1.5);}
    &.level-4 {margin-block: calc(var(--h4-size) * 1.5);}
    &.level-5 {margin-block: calc(var(--h5-size) * 1.5);}
  }

  /* Margins around sections in embedded mode */
  &.embedded section {
    &.level-1 {margin-block: calc(var(--h1-size) * 0.75);}
    &.level-2 {margin-block: calc(var(--h2-size) * 0.75);}
    &.level-3 {margin-block: calc(var(--h3-size) * 0.75);}
    &.level-4 {margin-block: calc(var(--h4-size) * 0.75);}
    &.level-5 {margin-block: calc(var(--h5-size) * 0.75);}
  }

  /* Margins between the heading and the first paragraph */
  .hr.heading {margin-bottom: 16px;}

  /* Margins between most elements */
  .hr {margin-block-end: 1em;}
  .hr.mathblock {margin-block-end: 0em;}
  .hr > .hr-content-zone > ol.enumerate,
  .hr > .hr-content-zone > ul.itemize {
    margin-block-end: 0;
    padding-inline-start: 1.5em;
  }
  .proof .hr.statement, .proof .hr.paragraph {margin-block-end: 0.5em;}

  /* Since MathJax containers already have a bottom margin of 1.0em, the paragraphs whose
   last element is an equation do not need margin */
  .mathblock:is(:last-child) mjx-container[jax="CHTML"][display="true"] {
    margin-block-end: 0;
  }
  /* .paragraph:has(:last-child.mathblock) {margin-block-end: 0;} */

}


/* Handrails: main flexbox */
.manuscriptwrapper {
  .hr {
    display: flex;

    .hr-collapse-zone {flex-shrink: 0;}
    .hr-menu-zone {position: absolute; display: none;}
    .hr-border-zone {flex-shrink: 0;}
    .hr-spacer-zone {flex-shrink: 0;}
    .hr-content-zone {flex-shrink: 1; flex-grow: 1; flex-basis: 0;}
    .hr-info-zone {padding: 8px; flex-shrink: 0;}

    &.hr-offset {position: relative;}
    &.hr-offset > .hr-collapse-zone {position: absolute; left: -48px;}
    &.hr-offset > .hr-menu-zone {position: absolute; left: -32px;}
    &.hr-offset > .hr-border-zone {position: absolute; left: -32px;}
    &.hr-offset > .hr-spacer-zone {position: absolute; left: -16px;}
    &.hr-offset > .hr-info-zone {position: absolute; left: 100%;}

  }
}

/* Handrails: individual elements -- collapse-zone */
.manuscriptwrapper .hr .hr-collapse-zone {
  .hr-collapse {
    position: relative;
    top: 8px;
    border-radius: 8px;
    opacity: 0%;

    .icon {padding-top: 8px; padding-bottom: 8px;}

  }
}
/* Handrails: individual elements -- border-zone */
.manuscriptwrapper .hr .hr-border-zone {
  .hr-border-dots {
    position: relative;
    top: 8px;
    border-radius: 8px;
    background: var(--surface-hover);
    z-index: 1;

    .icon {padding-top: 8px; padding-bottom: 8px;}

  }
  .hr-border-rect {
    position: relative;
    top: -32px;
    left: 7px;
    height: 100%;
    min-height: 8px;
    border-left: var(--border-thin) solid var(--handrail-default);
  }
}
.manuscriptwrapper .hr.heading {
  .hr-border-rect {
    left: 6px;
    border-left: var(--border-med) solid var(--handrail-default);
  }
}
.manuscriptwrapper .hr.step .hr.paragraph .hr-border-zone {
  /* Put paragraphs' border zone last so if they are inside another element with a
     handrail, the other element's border zone appears first.  This happens e.g. in
     proof steps.
   */
  z-index: 0;
}
/* Handrails: individual elements -- menu-zone */
.manuscriptwrapper .hr .hr-menu-zone {

  .hr-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 8px;
    background: var(--surface-page);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    width: 120px;
    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15),
		0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  }

  .hr-menu-item, .hr-menu-label {
    display: flex;
    padding-inline: 12px;
    gap: 8px;
    align-items: center;

    .hr-menu-item-text {
      font-size: 14px;
    }
  }

  .hr-menu-label .hr-menu-item-text {
    font-weight: var(--weight-semi);
  }

  .hr-menu-separator {
    border-top: 1px solid var(--light);
    margin-block: 4px;
    width: calc(100% - 24px);
    left: 12px;
    position: relative;
  }

}
/* Handrails: individual elements -- spacer-zone */
.manuscriptwrapper .hr .hr-spacer-zone, .manuscriptwrapper .hr .hr-collapse-zone {
  .hr-spacer {
    height: 0px;
    width: 16px;
  }
}
/* Handrails: individual elements -- content-zone */
.manuscriptwrapper .hr .hr-content-zone {
  & > p:first-child {
    padding-top: 8px;
  }
}
/* Handrails: individual elements -- info-zone */
.manuscriptwrapper .hr .hr-info-zone {
  .hr-info {
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;

    .eqn-number p, .step-number p {
      font-size: 14px;
      color: var(--medium);
    }

    &:has(.eqn-number), &:has(.step-number) {justify-content: flex-start;}

    &:has(.eqn-number) {position: relative; top: calc(100% - 16px);}

  }

  & .eqn-number, & .step-number {padding-bottom: 12px;}

}


/* Handrail hover */
.manuscriptwrapper .hr {
  & > .hr-border-zone .hr-border-dots, & > .hr-collapse-zone .hr-collapse {opacity: 0%;}
}
.manuscriptwrapper .hr:hover {
  & > .hr-border-zone .hr-border-dots, & > .hr-collapse-zone .hr-collapse {opacity: 100%;}
}
.manuscriptwrapper .hr.hr-hidden {
  & > .hr-border-zone {opacity: 0%;}
}
.manuscriptwrapper .hr.hr-hidden:hover {
  & > .hr-border-zone {opacity: 100%;}
}
.manuscriptwrapper .step.hr:hover > .hr-info-zone p {
  color: var(--extra-dark);
  font-weight: var(--weight-semi);
}
.manuscriptwrapper .mathblock.hr:hover > .hr-info-zone p,
.manuscriptwrapper .mathblock.hr:focus > .hr-info-zone p,
.manuscriptwrapper .paragraph.hr:focus > .hr-content-zone > .mathblock > .hr-info-zone p {
  color: var(--extra-dark);
  font-weight: var(--weight-semi);
}


/* Handrail active */
.manuscriptwrapper .hr.active,
.manuscriptwrapper .hr:focus {
  /* reset the default behavior */
  outline: none;

  /* highlight EVERY nested handrail border */
  .hr-border-zone {
    .hr-border-dots {background: var(--primary-600);}
    .hr-border-dots svg {stroke: var(--almost-white);}
    .hr-border-rect {border-left-color: var(--handrail-active);}
  }
  &.hr-collapsed > .hr-spacer-zone, &.hr-collapsed > .hr-border-zone > .hr-border-rect {
    border-bottom-color: var(--handrail-active) !important;
  }

  /* highlight ONLY the current active handrail's collapse and dots */
  & > .hr-border-zone > .hr-border-dots, & > .hr-collapse-zone > .hr-collapse {opacity: 100%}
  &.hr-hidden > .hr-border-zone, &.hr-hidden > .hr-collapse-zone {opacity: 100%}

  /* The active background is highlighted in zones but EXCEPT for collapse zone.
   Additionally, in the border zone we only paint the inner rectangle (hr-border-rect),
   otherwise the painted background would overflow the handrail border. */
  /* & > .hr-collapse-zone, */
  & > .hr-border-zone > .hr-border-rect,
  & > .hr-spacer-zone,
  & > .hr-content-zone,
  & > .hr-info-zone {
    background: var(--surface-information);
  }

  /* Most active areas include the info zone, except if the active area is a proof step statement */
  .hr-info-zone {border-top-right-radius: 16px; border-bottom-right-radius: 16px};

  /* Colors when hovered */
  .hr-border-zone .hr-border-dots:hover {background: var(--primary-400);}

}


/* Menu positioning and interaction */
.manuscriptwrapper .hr .hr-menu-zone .hr-menu {
  position: relative;
  left: -104px;
  z-index: 1;
}
.manuscriptwrapper .hr.hr-offset .hr-menu-zone .hr-menu {
  position: relative;
  left: -120px;
}
.manuscriptwrapper .hr {
  .hr-border-dots:hover, .hr-collapse:hover {background: var(--surface-hint);}
  .hr-collapse:hover svg {stroke: var(--extra-dark);}
  .hr-menu-item:hover, .hr-menu-item.active {background: var(--surface-hint);}
}
.manuscriptwrapper .hr-menu-zone .hr-menu-item {
  svg {stroke: var(--dark);}
  .hr-menu-item-text {color: var(--gray-800);}

  &.disabled {
    svg {stroke: var(--medium);}
    .hr-menu-item-text{color: var(--medium);}
  }

  &:hover:not(.disabled), &.active:not(.disabled) {
    svg {stroke: var(--extra-dark);}
    .hr-menu-item-text{color: var(--gray-900);}
  }

}


/* Labeled handrails */
.manuscriptwrapper .hr.hr-labeled .hr-content-zone {
  .hr-label {
    padding-block: 8px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 8px;

    span.label {font-weight: var(--weight-semi);}

  }
}

/* Labeled paragraphs */
.manuscriptwrapper .pg-label {
  font-weight: var(--weight-semi);
}


/* Collapsible handrails */
.manuscriptwrapper .hr.hr-collapsed  {

  & > .hr-border-zone > .hr-border-rect {
    border-bottom-left-radius: 8px;
  }

  & > .hr-spacer-zone, & > .hr-border-zone > .hr-border-rect {
    border-bottom: var(--border-med) solid var(--handrail-default);
  }

  &.hr-labeled > .hr-spacer-zone,
  &.hr-labeled > .hr-border-zone > .hr-border-rect,
  &.step > .hr-spacer-zone,
  &.step > .hr-border-zone > .hr-border-rect {
    border-bottom: var(--border-thin) solid var(--handrail-default);
  }

  &.hr-labeled > .hr-content-zone > .hr-label {
    border-bottom: unset;
  }

  & > .hr-collapse-zone > .hr-collapse {
    opacity: 100%;

    .icon.expand svg { stroke: var(--primary-700); }

  }

}

/* Proofs */
.manuscriptwrapper .hr {

  .hr-shift-1 {
    left: 24px;
    width: calc(100% - 24px);
  }

  &.subproof .hr-offset.hr.hr-hidden .hr-border-zone {opacity: 100%;}

  &.subproof > .hr-border-zone > .hr-border-rect {top: 0; width: 16px}

  &.subproof {margin-block-end: 0;}

  &.proof {position: relative;} /*to be able to position the Halmos*/

  &.proof:hover::after,
  &.proof:focus::after,
  &.proof .step:hover::after,
  &.proof .step:focus::after {
    content: "";
    position: absolute;
    background: var(--text-keyword);
    width: 8px;
    height: 8px;
    top: calc(100% - 8px);
    border-radius: 2px;
  }
  &.proof:hover::after, &.proof:focus::after {left: calc(100% + 8px - 48px);}
  &.proof .step:hover::after, &.proof .step:focus::after {left: calc(100% + 8px);}

  &.step.hr-collapsed > .hr-content-zone::after {
    content: "steps hidden";
    position: relative;
    left: 4px;
    top: 8px;
    color: var(--medium);
    font-style: italic;
    font-size: 14px;
  }

}


/* Inline math */
/* Prevent math followed by a dot from being separated. */
.manuscriptwrapper .inline-math-wrapper {
  white-space: nowrap;
}


/* Icons */
.manuscriptwrapper .icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.manuscriptwrapper .tabler-icon {
  &.bookmark {fill: var(--information-500); }
  &.check {fill: var(--green-500);}
  &.success {fill: var(--success-500);}
  &.alert {fill: var(--warning-500); }
  &.exclamation {fill: var(--orange-500); }
  &.question {fill: var(--purple-500);}
  &.heart {fill: var(--red-500); }
  &.star {fill: var(--yellow-500); }
  &.quote {fill: var(--pink-500); }
  &.collapse {stroke: var(--dark); }
  &.error {fill: var(--error-500); }
}


/* TOC */
.manuscriptwrapper {

  .toc-wrapper, .float-minimap-wrapper {
    display: flex;
    flex-direction: row;
    padding-left: 48px;

    ul.contents {
      flex-grow: 1;
    }

    .minimap {
      width: 48px;
      display: flex;
      justify-content: center;

      svg {
	width: 32px;
	height: 100%;
	display: block;
	fill: var(--gray-200);
	stroke: var(--gray-200);
      }
    }

  }

  .float-minimap-wrapper {

    .minimap {
      opacity: 50%;
      position: fixed;
      left: 48px;
      top: 50%;
      transform: translateY(-50%);

      &:hover {opacity: 100%};

    }

  }

  ul.contents {
    list-style: none;
    padding-inline-start: 0;

    li {margin-block: 0.5rem;}

  }

  ul.contents ul.itemize {
    list-style: none;
    margin-block-end: 0;
    padding-inline-start: 1rem;
  }

}


/* Bibliography */
.manuscriptwrapper ol.bibliography {
  list-style: none;
  counter-reset: item 1;
  padding-inline-start: 48px;

  li {margin-block: 0.75rem;}

  li::before {
    margin-right: 10px;
    padding: 3px;
    content: counter(item);
    width: 1.2em;
    text-align: center;
    display: inline-block;
  }

}


/* Highlighting */
.manuscriptwrapper .hilite {
  background-color: var(--text-hilite-bg);
}


/* Figures */
.manuscriptwrapper figure {
  margin-block: var(--h2-size);
  text-align: center; }
.manuscriptwrapper figcaption {
  text-align: center;
  margin-block: var(--h4-size); }


/* Other */
.manuscriptwrapper .keyword {
  color: var(--text-keyword);
  font-weight: var(--weight-semi); }
/* .manuscriptwrapper p > span.construct:not(:first-child) > span.keyword { */
/*   margin-inline-start: 0.1rem; } */
/* .manuscriptwrapper p > span.construct > span.keyword { */
/*   margin-inline-end: 0.1rem; } */
.manuscriptwrapper .author > p {
  margin: 0; }

/* Manuscript metadata */
.manuscriptwrapper .manuscript-date {
  font-size: 0.9375rem;
  color: var(--gray-700);
  margin-block: 0.5rem 1.5rem;
  margin-inline-start: 48px; }

/* Abstract keywords and MSC */
.manuscriptwrapper .abstract .keywords,
.manuscriptwrapper .abstract .msc {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--gray-700);
  margin-block: 0.75rem;
  margin-inline-start: 48px; }

/* Author collapsed mode */
.manuscriptwrapper .authors-container {
  position: relative; }

.manuscriptwrapper .author-hidden {
  display: none; }

.manuscriptwrapper .toggle-authors {
  display: block;
  width: 100%;
  margin: 1.5rem 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.875rem;
  font-weight: var(--weight-regular);
  color: var(--gray-500);
  text-align: center;
  text-decoration: underline;
  text-decoration-color: var(--gray-400);
  text-underline-offset: 2px;
  transition: color 0.15s ease-in-out; }

.manuscriptwrapper .toggle-authors:hover {
  color: var(--gray-700);
  text-decoration-color: var(--gray-600); }

.manuscriptwrapper .toggle-authors:active {
  color: var(--gray-800); }

.manuscriptwrapper .toggle-authors:focus {
  outline: none;
  color: var(--gray-700); }



/* Tables */
.manuscriptwrapper .table-wrapper {
  margin-inline-start: 48px;
  margin-block: 1em;
  display: flex;
  flex-direction: column; }
.manuscriptwrapper .table-wrapper > table {
  overflow-x: auto;
  display: block; }
.manuscriptwrapper table.table {
  text-align: center;
  border-collapse: collapse; }
.manuscriptwrapper tbody td.tabledatum {
  padding-inline: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--gray-300); }
.manuscriptwrapper thead.tablehead {
  background: var(--gray-200); }
.manuscriptwrapper thead.tablehead td.tabledatum {
  padding-inline: 1rem;
  padding-block: 0.75rem;
  border-top: 2px solid var(--gray-600);
  border-bottom: 2px solid var(--gray-600); }
.manuscriptwrapper table.table:not(:has(thead)) tbody tr:first-child td.tabledatum {
  border-top: 2px solid var(--gray-600); }
.manuscriptwrapper tbody tr:last-child td.tabledatum {
  border-bottom: 2px solid var(--gray-600); }
.manuscriptwrapper table caption {
  caption-side: bottom;
  display: table-caption;
  margin-block: 0.5rem;
  text-align: center; }
.manuscriptwrapper table caption.hr {
  min-width: max-content; }
.manuscriptwrapper table caption.hr .hr-content-zone {
  text-align: center;
  padding-inline: 1rem;
  padding-block: 0.5rem; }

/* Hyperlinks */
.manuscriptwrapper {

  a:link, a:visited, a:active {
    text-decoration: none;
    color: var(--link-default);
    cursor: pointer;
    /* by default, links do weird things with line heights, so if we want a single line
    inside an <a> tag to be 24px tall, we need to change its display */
    display: inline-block;

    &.reference.backlink, &.reference.cite {padding-inline: 0.2em;}
    &.reference.backlink {font-size: 14px;}

    & > .icon.ext > svg {stroke: var(--link-default);}

  }

  a:hover {
    text-decoration: underline;
    color: var(--link-hover);

    & > .icon.ext > svg {stroke: var(--link-hover);}

  }

  a:focus {
    outline: none;              /* reset the default */
    box-shadow: 0 var(--border-thin) 0 var(--border-action);
    background: var(--surface-information);
    color: var(--information-700);
  }

  a:focus:has(.icon.ext) {
    outline: 2px solid var(--information-500);
    box-shadow: unset;
    border-radius: 4px;
    outline-offset: 4px;
  }

}


/* Toast notifications */
/* Modified from https://codepen.io/jrsmiffy/pen/eYYwrap */
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--extra-dark);
  border-width: 2px;
  border-style: solid;
  margin: auto;
  width: max-content;
  padding-block: 8px;
  padding-inline: 16px;
  border-radius: 16px;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 30px;
  white-space: nowrap;
  overflow: hidden;
  animation: fadein 0.5s, stay 3s 1s, fadeout 0.5s 4.5s;

  & .close {
    padding: 8px;
    border-radius: 8px;
    svg {stroke: var(--almost-black)};
  }

  & .close:hover {
    cursor: pointer;
    background: var(--light);
  }

  & .spacer {
    display: inline-block;
    width: 16px;
  }

  & .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 14px;
    z-index: -1;
    animation: shrinkleft 5s;
  }

  &.information {
    background-color: var(--surface-information);
    border-color: var(--border-information);

    & .bg {background-color: var(--information-100);}

  }

  &.success {
    background-color: var(--surface-success);
    border-color: var(--border-success);

    & .bg {background-color: var(--success-100);}

  }

  &.error {
    background-color: var(--surface-error);
    border-color: var(--border-error);

    & .bg {background-color: var(--error-100);}

  }

}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@keyframes stay {}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 60px; opacity: 0;}
}
@keyframes shrinkleft {
  from {width: 100%;}
  to {width: 0%;}
}


/* RSM predefined types */
.manuscriptwrapper {
  .tiny {font-size: 0.5rem;}
  .smallest {font-size: 0.7rem;}
  .smaller {font-size: 0.8rem;}
  .small {font-size: 0.9rem;}
  .normal {font-size: 1rem;}
  .large {font-size: 1.2rem;}
  .larger {font-size: 1.44rem;}
  .largest {font-size: 1.7281rem;}
  .huge {font-size: 2.0741rem;}
  .huger {font-size: 2.488rem;}
  .draft {color: var(--secondary-600);}
}

/* @media (min-width: 70em) { */
/*   .manuscriptwrapper { */
/*     box-shadow: 0 0 8px 10px #eee; */
/*     margin: 2.5em auto; } */
/*   .manuscriptwrapper--narrow { */
/*     margin: 2.5em 20em 2.5em auto; } */
/*   a.bibitem-doi { */
/*     float: right; } } */

/* @media (max-width: 48em) { */
/*   :root { */
/*     --h1-size: 2.488rem; */
/*     --h2-size: 2.074rem; */
/*     --h3-size: 1.728rem; */
/*     --h4-size: 1.440rem; */
/*     --h5-size: 1.200rem; */
/*     --h6-size: 1.000rem; */
/*     --side-padding: 1.5em; */
/*     --font-size: 93.75%; } */
/*   .manuscriptwrapper { */
/*     padding-left: calc(var(--side-padding)*1.5); } */
/*   .manuscriptwrapper--narrow { */
/*     margin: 2.5em 15em 2.5em auto; } */
/*   .options { */
/*     left: 0; */
/*     right: unset; } */
/*   .options .option { */
/*     text-align: start; } */
/*   .handrail--offset { */
/*     transform: none; */
/*     width: 100%; } */
/*   .handrail--nested { */
/*     transform: translateX(calc(-1 * var(--handrail-offset) - var(--border-thin))); */
/*     width: calc(100% + var(--handrail-offset) + var(--border-thin)); } */
/*   .handrail__icons { */
/*     transform: unset; */
/*     flex-direction: row; */
/*     left: var(--handrail--offset); */
/*     top: 0; */
/*     gap: .25rem; } */
/*   .fas:not(.handrail__icons-last) { */
/*     display: none; } */
/* } */

/* External cross-file references */
a.reference.external::after {
  content: " ↗";
  font-size: 0.8em;
  vertical-align: super;
  opacity: 0.6;
}

a.reference.external {
  color: #0066cc;
}

a.reference.external:hover::after {
  opacity: 1;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--border-primary);
  background-color: var(--surface-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background-color: var(--surface-hover);
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

.dark-mode-toggle:focus-visible {
  outline: 2px solid var(--border-action);
  outline-offset: 2px;
}

.dark-mode-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--extra-dark);
}

/* Show/hide icons based on theme */
.dark-mode-toggle .dark-icon {
  display: none;
}

.dark-theme .dark-mode-toggle .dark-icon {
  display: block;
}

.dark-theme .dark-mode-toggle .light-icon {
  display: none;
}

/* Responsive: reduce side padding on smaller viewports */
@media (max-width: 768px) {
  :root {
    --side-padding: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --side-padding: 1rem;
  }
}

/* RSM Source Modal */
.rsm-source-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.rsm-source-modal-content {
  background-color: var(--surface-primary);
  margin: 10% auto;
  padding: 16px;
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  width: 80%;
  max-width: 800px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.rsm-source-modal-actions {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 8px;
}

.rsm-source-modal-icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.rsm-source-modal-icon-button:hover {
  color: var(--text-primary);
  background-color: var(--gray-200);
}

.dark-theme .rsm-source-modal-icon-button:hover {
  background-color: var(--gray-800);
}

.rsm-source-modal-icon-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.rsm-source-modal-body {
  max-height: 60vh;
  overflow-y: auto;
  background: var(--gray-100);
  border-radius: 4px;
}

.dark-theme .rsm-source-modal-body {
  background: var(--gray-900);
}

.rsm-source-modal-body pre {
  background-color: transparent;
  padding: 15px;
  border: none;
  overflow-x: auto;
  margin: 0;
  color: var(--text-primary);
}

.toast {
  z-index: 2100;
}

}