/* =========================================================
   Lecture downloads (PDF + video)
   ---------------------------------------------------------
   Drawn the way the homepage draws this panel, which is the
   design the site is launching with: one soft top-lit card
   holding a darker inset panel, and inside it a row per file
   — a teal line icon, the filename with its type under it,
   and a pill button on the right. The two header bars with
   the teal left accent are gone; so are the coloured PDF and
   MP4 glyphs, whose orange was left over from the terracotta
   palette and whose job the row's own subtitle now does in
   words.

   The sizes are not the homepage's. That card holds a mock
   of this panel at roughly 60% of life size; copying its
   type sizes here would give a student 10px rows.
   ========================================================= */

.ace-downloads{
  /* The teal the homepage uses for text and icons on a dark surface: the
     palette's primary lifted towards white until it clears 4.5:1 there.
     Precomputed first, for browsers without color-mix (iOS 15 and older). */
  --ace-dl-teal: #61b6b1;
  --ace-dl-line: rgba(255,255,255,.08);
  --ace-dl-line2: rgba(255,255,255,.14);

  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  margin: 28px 0 8px;
  border: 1px solid var(--ace-dl-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  transition: border-color .2s ease;
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ace-downloads{ --ace-dl-teal: color-mix(in srgb, var(--color-primary, #008a81) 62%, #fff); }
}

.ace-downloads:hover{ border-color: var(--ace-dl-line2); }

/* ---- heading ---- */

.ace-dl-head{
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-heading, #f5f4ef) !important;
}
.ace-dl-head svg{
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--ace-dl-teal);
}

/* ---- the inset panel ---- */

.ace-dl-panel{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--ace-dl-line2);
  border-radius: 12px;
  background: #1f1f1d;
}

/* ---- a file ---- */

/*
 * Two columns: the icon, and everything else stacked beside it — the
 * filename, its type, then the button underneath.
 *
 * The button used to sit on the same line as the name. Filenames here are
 * written like "Sept2026-A.01-MATH1-Notes-PartA", with no spaces to break
 * at, so in a 300px column the name was left about a hundred pixels and
 * broke into three ragged lines beside a button. Underneath, the name gets
 * the whole width and the button lines up under the text it belongs to.
 */
.ace-dl-row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--ace-dl-line);
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease;
}
.ace-dl-row:hover,
.ace-dl-row:focus-visible{
  background: rgba(255,255,255,.035);
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .5);
}

/* On the first line of the name rather than centred against the whole
   stack, which would float it beside the button. */
.ace-dl-row-icon{
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  margin-top: 1px;
  color: var(--ace-dl-teal);
}
.ace-dl-row-icon svg{ width: 16px; height: 16px; }

.ace-dl-row-text{ grid-column: 2; min-width: 0; }
.ace-dl-row > .ace-dl-btn{
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
}
/*
 * The filename. !important, reluctantly and deliberately: when this panel
 * renders through the_content it lands inside the lecture body, and
 * something in the stack (LearnDash's own stylesheet is the likely
 * candidate) forces a link colour onto everything in there. The quiz list
 * two files over already had to do exactly this, so this is the house
 * pattern rather than a shortcut.
 */
.ace-dl-row-text b{
  display: block;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading, #f5f4ef) !important;
  word-break: break-word;
}
.ace-dl-row-text em{
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: .68rem;
  line-height: 1.3;
  color: var(--color-text-muted, #a39e93);
}
.ace-dl-row:hover .ace-dl-row-text b{ color: var(--ace-dl-teal) !important; }

/* ---- the pill, shared by the buttons in this panel ---- */

.ace-dl-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ace-dl-line2);
  background: rgba(255,255,255,.07);
  color: var(--color-heading, #f5f4ef);
  font-family: inherit;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ace-dl-btn.is-solid{
  /* The palette's primary darkened until white on it clears 4.5:1 —
     the same mix the homepage's solid pill uses. */
  background: #007870;
  border-color: transparent;
  color: #fff;
}
@supports (color: color-mix(in srgb, red 50%, white)){
  .ace-dl-btn.is-solid{ background: color-mix(in srgb, var(--color-primary, #008a81) 87%, #000); }
}
.ace-dl-row:hover .ace-dl-btn{ background: rgba(255,255,255,.12); }
.ace-dl-row:hover .ace-dl-btn.is-solid{ background: var(--color-primary, #008a81); }

button.ace-dl-btn:hover{
  color: var(--ace-dl-teal);
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .6);
}
.ace-dl-btn svg{ width: 14px; height: 14px; }
.ace-dl-pass-copy.is-copied{ color: #8dc49a; border-color: #8dc49a; }

/* ---- password row ---- */

/*
 * Label and field on the first line, Show and Copy together under the
 * field. As a wrapping flex row the two buttons split up in a narrow
 * column — Show beside the field, Copy alone on the line below — which
 * read as a leftover rather than a pair.
 */
.ace-dl-pass{
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 2px 2px 4px;
}
.ace-dl-pass > .ace-dl-pass-label{ grid-column: 1; grid-row: 1; }
.ace-dl-pass > .ace-dl-pass-value{ grid-column: 2 / -1; grid-row: 1; }
.ace-dl-pass > .ace-dl-pass-toggle{ grid-column: 2; grid-row: 2; justify-self: start; }
.ace-dl-pass > .ace-dl-pass-copy{ grid-column: 3; grid-row: 2; justify-self: start; }
.ace-dl-pass-label{
  font-size: .68rem;
  color: var(--color-text-muted, #a39e93);
}
.ace-dl-pass-value{
  min-width: 0;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--color-heading, #f5f4ef);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem;
  letter-spacing: .12em;
}
.ace-dl-pass-value.is-revealed{ letter-spacing: .04em; }

/* ---- terms gate on the videos ---- */

.ace-dl-terms{
  padding: 2px 2px 2px 4px;
  margin-top: 2px;
}
.ace-dl-terms-label{
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--color-text-muted, #a39e93);
  transition: color .18s ease;
  user-select: none;
}
.ace-dl-terms-label:hover{ color: var(--color-text, #e8e6dc); }

/* The native box ignores most styling and renders with the OS chrome, so
   it is drawn here instead. */
.ace-dl-terms-check{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 5px;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.ace-dl-terms-label:hover .ace-dl-terms-check{
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .7);
}
/* Drawn from two borders rather than a glyph, so it stays crisp at any
   zoom and needs no icon font. */
.ace-dl-terms-check::after{
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}
.ace-dl-terms-check:checked{
  background: var(--color-primary, #008a81);
  border-color: var(--color-primary, #008a81);
}
.ace-dl-terms-check:checked::after{ opacity: 1; transform: rotate(45deg) scale(1); }
.ace-dl-terms-check:focus-visible{
  outline: 2px solid var(--color-primary, #008a81);
  outline-offset: 2px;
}

.ace-dl-terms-link{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--ace-dl-teal);
  border-bottom: 1px solid rgba(var(--ace-primary-rgb, 0,138,129), .45);
}
.ace-dl-terms-link:hover{ border-bottom-color: var(--ace-dl-teal); }

/* Locked until the box is ticked. Presentation only — see the note in the
   PHP; the links are still in the markup, so this is a speed bump rather
   than access control. */
.ace-dl-list-locked{
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: .35;
  pointer-events: none;
  filter: blur(1.5px);
  transition: opacity .2s ease, filter .2s ease;
}
.ace-dl-list-locked.is-unlocked{ opacity: 1; pointer-events: auto; filter: none; }

.ace-dl-card-video{ display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 600px){
  .ace-downloads{ padding: 14px; }
}

/* =========================================================
   Two-column lecture layout
   ---------------------------------------------------------
   On wide screens the lecture body doesn't fill the available
   width, so the downloads move into a narrower right-hand
   column instead of stacking underneath and pushing content
   down. Below 1200px it collapses back to a single column.
   ========================================================= */

.ace-topic-layout{ display: block; }

@media (min-width: 1200px){
  .ace-topic-layout.has-aside{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: start;
  }
  .ace-topic-aside{
    position: sticky;
    top: 20px;
  }
  /* Narrower here, so the internals tighten a little. */
  .ace-topic-aside .ace-downloads{ margin-top: 0; }
  /*
   * Match the quiz rows exactly — same size, same line-height — so the
   * lists in this column read as one thing. Three classes because the
   * rule it has to beat has three; a two-class rule lost to it silently,
   * which is why filenames used to sit a notch larger than quizzes.
   * Reference: .ace-topic-aside .ld-table-list-item-preview .ld-item-title
   * in ace-lesson-steps/assets/layout.css.
   */
  .ace-topic-aside .ace-downloads .ace-dl-row-text b{
    font-size: .8rem;
    line-height: 1.4;
  }
  .ace-topic-aside .ace-dl-row{ padding: 9px 10px; column-gap: 9px; }

}

.ace-topic-main{ min-width: 0; } /* keeps wide embeds from blowing out the grid column */

/* =========================================================
   Video tabs
   ========================================================= */

.ace-video-tabs{ margin: 0 0 6px; }

.ace-vt-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 14px;
}
.ace-vt-tab{
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted, #a39e93);
  font-family: var(--font-heading, sans-serif);
  font-size: .86rem;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  margin-bottom: -1px;
}
.ace-vt-tab:hover{ color: var(--color-text, #e8e6dc); }
.ace-vt-tab.is-active{
  color: var(--color-primary, #008a81);
  border-bottom-color: var(--color-primary, #008a81);
}

.ace-vt-pane{ display: none; }
.ace-vt-pane.is-active{ display: block; }

/* Responsive 16:9 frame so pasted embeds scale instead of keeping
   whatever fixed width/height the provider's snippet came with. */
.ace-vt-frame{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.ace-vt-frame iframe,
.ace-vt-frame video,
.ace-vt-frame embed,
.ace-vt-frame object{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* =========================================================
   Copyright notice (pinned under the video tabs)
   ---------------------------------------------------------
   Deliberately quiet: it's a passive legal notice, not
   something the student needs to act on, so it sits at
   reduced opacity and lifts to full on hover if they do want
   to read it closely.
   ========================================================= */

.ace-lecture-copyright{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 20px;
  padding: 9px 13px;
  background: rgba(var(--ace-primary-rgb, 204,120,92), .05);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid rgba(var(--ace-primary-rgb, 204,120,92), .6);
  border-radius: 8px;
  opacity: .62;
  transition: opacity .18s ease;
}
.ace-lecture-copyright:hover{ opacity: 1; }

.ace-lecture-copyright-icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #008a81);
}
.ace-lecture-copyright-icon svg{ width: 15px; height: 15px; }

.ace-lecture-copyright-body{
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.ace-lecture-copyright-title{
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-heading, #f5f4ef);
  white-space: nowrap;
}

/* The "All rights reserved" pill added nothing but height at this
   size — folded into the title line instead. */
.ace-lecture-copyright-tag{ display: none; }

.ace-lecture-copyright-text{
  margin: 0;
  font-size: .7rem;
  line-height: 1.45;
  color: var(--color-text-muted, #a39e93);
}

@media (max-width: 600px){
  .ace-lecture-copyright{ padding: 8px 11px; gap: 9px; }
}

/* =========================================================
   Video lightbox
   ========================================================= */

/* Click layer over the inline embed ------------------------------
   Glass treatment rather than a solid fill: video thumbnails vary
   wildly in brightness, and a translucent blurred disc with a light
   rim stays legible over both dark and washed-out frames. */
.ace-vt-expand{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,.5) 100%
  );
  border: none;
  cursor: pointer;
  color: #fff;
  transition: background .25s ease;
}
.ace-vt-expand:hover{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.45) 60%,
    rgba(0,0,0,.6) 100%
  );
}

.ace-vt-expand-play{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding-left: 5px;                 /* optically centres the triangle */
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 26px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.34,1.3,.64,1),
              background .25s ease,
              border-color .25s ease;
}

/* Expanding rim on hover — draws the eye without moving the layout. */
.ace-vt-expand-play::before{
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s ease, transform .25s ease;
}

.ace-vt-expand:hover .ace-vt-expand-play{
  transform: scale(1.08);
  background: var(--color-primary, #008a81);
  border-color: rgba(255,255,255,.85);
}
.ace-vt-expand:hover .ace-vt-expand-play::before{
  opacity: 1;
  transform: scale(1);
}
.ace-vt-expand:active .ace-vt-expand-play{ transform: scale(1.02); }

.ace-vt-expand-hint{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.ace-vt-expand:hover .ace-vt-expand-hint,
.ace-vt-expand:focus-visible .ace-vt-expand-hint{
  opacity: 1;
  transform: none;
}

.ace-vt-expand:focus-visible{
  outline: 3px solid var(--color-primary, #008a81);
  outline-offset: -3px;
}

/* Respect reduced-motion preferences: keep the colour change, drop
   the scaling and sliding. */
@media (prefers-reduced-motion: reduce){
  .ace-vt-expand-play,
  .ace-vt-expand-play::before,
  .ace-vt-expand-hint{ transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
  .ace-vt-expand:hover .ace-vt-expand-play{ transform: none; }
  .ace-vt-expand-hint{ transform: none; }
}

/* The modal itself */
.ace-vt-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.ace-vt-lightbox.is-open{ display: flex; }

.ace-vt-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10,10,9,.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ace-vt-lightbox-inner{
  position: relative;
  width: min(1200px, 100%);
  animation: ace-vt-pop .22s ease;
}
@keyframes ace-vt-pop{
  from{ opacity: 0; transform: scale(.97); }
  to{ opacity: 1; transform: none; }
}

.ace-vt-lightbox-stage{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ace-vt-lightbox-stage iframe,
.ace-vt-lightbox-stage video{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.ace-vt-lightbox-close{
  position: absolute;
  top: -44px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ace-vt-lightbox-close:hover{
  background: var(--color-primary, #008a81);
  border-color: var(--color-primary, #008a81);
}

body.ace-vt-noscroll{ overflow: hidden; }

@media (max-width: 782px){
  .ace-vt-lightbox{ padding: 0; }
  .ace-vt-lightbox-inner{ width: 100%; }
  .ace-vt-lightbox-stage{ border-radius: 0; }
  .ace-vt-lightbox-close{
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,.6);
  }
  .ace-vt-expand-play{ width: 52px; height: 52px; }
}

/* =========================================================
   Letter of Undertaking
   =========================================================

   The terms beside the download checkbox open this rather than
   a new tab, so a student never leaves the lecture to read them.

   Set as a document on paper inside a dark frame, rather than as
   another dark panel. It is a legal undertaking that a student may
   want to print, and reading it on a sheet says what it is before
   a word of it is read.
   --------------------------------------------------------- */

.ace-lou[hidden] { display: none; }

.ace-lou {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.ace-lou-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(2px);
}

.ace-lou-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  /* Never taller than the viewport: the body below scrolls instead,
     so the header and the buttons stay reachable on a short screen. */
  max-height: min(88vh, 900px);
  background: var(--color-bg-alt, #30302e);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
}

/* ---------- frame ---------- */

.ace-lou-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ace-lou-eyebrow {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary, #008a81);
  margin-bottom: 4px;
}

.ace-lou-heading {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-heading, #f5f4ef) !important;
}

.ace-lou-x {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: var(--color-muted, #a39e93);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.ace-lou-x:hover {
  color: var(--color-heading, #f5f4ef);
  border-color: rgba(255, 255, 255, .3);
}

.ace-lou-notice {
  margin: 0 !important;
  padding: 11px 22px;
  background: rgba(214, 158, 74, .12);
  border-bottom: 1px solid rgba(214, 158, 74, .25);
  color: #e0b46a;
  font-size: .78rem;
  line-height: 1.5;
}

.ace-lou-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  background: rgba(0, 0, 0, .18);
}

/* ---------- the sheet ---------- */

.ace-lou-paper {
  max-width: 620px;
  margin: 0 auto;
  padding: 44px 46px 52px;
  background: #f7f6f2;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  color: #23231f;
  /* A serif for the letter itself. The rest of the site is sans, but
     this is the one thing on it that is a legal document. */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .9rem;
  line-height: 1.75;
  text-align: justify;
}

.ace-lou-paper p { margin: 0 0 14px; color: #23231f; }
.ace-lou-paper strong { color: #000; font-weight: 700; }

.ace-lou-date { text-align: left !important; }

.ace-lou-to { margin-bottom: 20px; text-align: left; }
.ace-lou-to p { margin: 0; line-height: 1.6; }
.ace-lou-to p.is-strong { font-weight: 700; }

.ace-lou-salutation { text-align: left !important; margin-bottom: 20px !important; }

.ace-lou-title {
  margin: 0 0 18px !important;
  text-align: center !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  color: #000 !important;
}

.ace-lou-clauses {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
  list-style: decimal !important;
}

.ace-lou-clauses li {
  margin: 0 0 14px !important;
  padding-left: 6px;
  color: #23231f;
}

.ace-lou-witness { margin-top: 22px !important; }

/* A visible rule where a detail is missing, so a blank reads as
   "nothing here yet" rather than as a rendering fault. */
.ace-lou-blank {
  display: inline-block;
  min-width: 190px;
  border-bottom: 1px solid #9a9a92;
  vertical-align: baseline;
}

.ace-lou-sign { margin-top: 40px; text-align: left; }

.ace-lou-signature {
  margin: 0 0 2px !important;
  padding-bottom: 4px;
  min-height: 1.4em;
  font-weight: 700;
  border-bottom: 1px solid #23231f;
  display: inline-block;
  min-width: 260px;
}

.ace-lou-signline {
  margin: 0 !important;
  font-style: italic;
  font-size: .8rem;
  color: #4a4a44;
}

/* ---------- actions ---------- */

.ace-lou-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ace-lou-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.ace-lou-btn.is-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .18);
  color: var(--color-text, #e8e6dc);
}

.ace-lou-btn.is-ghost:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--color-heading, #f5f4ef);
}

.ace-lou-btn.is-primary {
  background: var(--color-primary, #008a81);
  border-color: var(--color-primary, #008a81);
  color: #fff;
}

.ace-lou-btn.is-primary:hover {
  background: var(--color-primary-dark, #006c65);
  border-color: var(--color-primary-dark, #006c65);
}

/* The trigger. A <button>, not a link -- it goes nowhere, and a link
   with no href is not reachable by keyboard. */
.ace-dl-terms .ace-dl-terms-link {
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .45);
  color: var(--color-primary, #008a81);
  font: inherit;
  cursor: pointer;
}

.ace-dl-terms .ace-dl-terms-link:hover {
  border-bottom-color: var(--color-primary, #008a81);
}

/* Nothing behind the letter scrolls while it is open. */
body.ace-lou-open { overflow: hidden; }

@media (max-width: 620px) {
  .ace-lou { padding: 0; }
  .ace-lou-dialog { max-height: 100vh; border-radius: 0; border: 0; width: 100%; }
  .ace-lou-body { padding: 12px; }
  .ace-lou-paper { padding: 26px 22px 34px; font-size: .85rem; text-align: left; }
  .ace-lou-blank { min-width: 120px; }
}

/* ---------- the letter's scrollbar ----------

   The browser default is a wide light-grey bar, which on a dark modal
   reads as a stripe of UI down the side of the document. Slimmed and
   themed so it belongs to the letter.

   Both syntaxes: the standard properties for Firefox, and the WebKit
   pseudo-elements for Chrome and Safari. Neither alone covers both. */
.ace-lou-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.ace-lou-body::-webkit-scrollbar {
  width: 10px;
}

.ace-lou-body::-webkit-scrollbar-track {
  background: transparent;
}

.ace-lou-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  /* An inset border keeps the thumb clear of the document edge rather
     than pressed against it. */
  border: 3px solid transparent;
  background-clip: content-box;
}

.ace-lou-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .3);
  background-clip: content-box;
}

/* Belt and braces: if anything else on the page tries to flatten the
   sheet, this restates it at a specificity that wins. Inline styles
   still beat it, which is why the opt-out above matters. */
.ace-lou[data-ace-keep-bg] .ace-lou-paper.ace-lou-paper {
  background: #f7f6f2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  color: #23231f;
}