/* ==========================================================================
   Appointment letter.

   Two audiences for one stylesheet: someone reading it on a phone, and a
   printer producing something a student will hand to an employer. The screen
   rules keep it readable; the print rules make it an A4 page with nothing else
   on it. The letter is set in a serif because that is what the signed original
   uses, and a letter that does not look like the letter is not the letter.
   ========================================================================== */

.rs-letter-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ---------------------------------------------------------------- the bar */

.rs-letter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--rs-sunk, #F7F7FC);
  color: var(--rs-ink, #16193B);
  font-family: var(--rs-sans, system-ui, sans-serif);
}

.rs-letter-bar__ref {
  display: block;
  font-size: 0.85rem;
  color: var(--rs-ink-2, #6A6C86);
}

.rs-letter-note {
  margin: 0 0 22px;
  font-family: var(--rs-sans, system-ui, sans-serif);
  font-size: 0.9rem;
  color: var(--rs-ink-2, #6A6C86);
}

/* ------------------------------------------------------------- the letter */

.rs-letter {
  /* A4 minus 20mm margins. Fixed, so what is on screen is what prints. */
  width: 170mm;
  max-width: 100%;
  min-height: 257mm;
  margin: 0 auto;
  padding: 18mm 0 0;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 11.5pt;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(20, 17, 43, 0.1), 0 24px 60px rgba(20, 17, 43, 0.14);
  display: flex;
  flex-direction: column;
}

.rs-letter__head {
  display: flex;
  align-items: center;
  gap: 14mm;
  padding: 0 12mm;
}

.rs-letter__logo {
  width: 26mm;
  height: auto;
  flex: 0 0 auto;
}

.rs-letter__org {
  flex: 1 1 auto;
  text-align: right;
  font-weight: 700;
  font-size: 13pt;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.rs-letter__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 6mm 12mm 0;
  padding-bottom: 2mm;
  /* The rule under this row is the one strong horizontal in the original. */
  border-bottom: 2.5pt solid #444;
  font-size: 11pt;
}

.rs-letter__title {
  margin: 6mm 0 5mm;
  text-align: center;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
}

.rs-letter__body {
  flex: 1 1 auto;
  padding: 0 12mm;
}

.rs-letter__body p {
  margin: 0 0 4.5mm;
  text-align: justify;
}

.rs-letter__body strong { font-weight: 700; }

/* --------------------------------------------------------------- the foot */

.rs-letter__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10mm;
  padding: 8mm 12mm 12mm;
}

.rs-letter__qr {
  flex: 0 0 auto;
  text-align: center;
  font-family: var(--rs-sans, system-ui, sans-serif);
  font-size: 7.5pt;
  color: #555;
  line-height: 1.3;
}

.rs-letter__qr img {
  display: block;
  /* 30mm, not 24. At 24mm the modules of a version-4 code are 0.6mm across and
     phones hesitate; at 30mm they are 0.73mm and it reads first time, which is
     the only measure that matters for something printed once and scanned by
     whoever picks the letter up. */
  width: 30mm;
  height: 30mm;
  margin: 0 auto 1.5mm;
}

.rs-letter__sign {
  flex: 1 1 auto;
  text-align: right;
  font-size: 11pt;
  line-height: 1.45;
}

.rs-letter__signature {
  display: block;
  width: 34mm;
  height: auto;
  margin: 0 0 1mm auto;
}

.rs-letter__signatory { font-weight: 400; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 640px) {
  .rs-letter-wrap { padding: 16px 10px 48px; }

  /* Below A4 width the letter has to shrink rather than scroll sideways,
     otherwise reading it on a phone means dragging the page left and right. */
  .rs-letter {
    width: 100%;
    min-height: 0;
    padding-top: 10mm;
    font-size: 10.5pt;
  }
  .rs-letter__head,
  .rs-letter__body,
  .rs-letter__meta,
  .rs-letter__foot { padding-left: 6mm; padding-right: 6mm; }
  .rs-letter__meta { margin-left: 6mm; margin-right: 6mm; }
  .rs-letter__org { font-size: 11pt; }
  .rs-letter__foot { flex-direction: column-reverse; align-items: flex-start; gap: 8mm; }
  .rs-letter__sign { text-align: left; }
  .rs-letter__signature { margin-left: 0; }
}

/* ------------------------------------------------------------------ print */

/* Legal, because the society wants the whole thing on one sheet and an
   appointment letter with this much on it does not fit A4 without squeezing the
   type — and the seals at the foot need room to be seals rather than tokens.
   Legal is 59mm taller than A4 at almost the same width, which is exactly the
   difference between two cramped pages and one comfortable one.
 *
   Chrome takes this as the paper to use; if somebody picks a different size in
   the print dialog it wins, so the letter still has to survive being put on A4
   — it does, over two pages. */
@page { size: legal; margin: 0; }

/* A canvas letter needs @page { margin: 0 } instead, because its artwork runs
   to the edge of the sheet. @page cannot be varied by a class — it is a
   document-level rule — so the canvas renderer prints its own <style> tag on
   the page instead. See RS_Letters_Layout::render(). */

@media print {
  /* Everything that is not the letter goes: headers, menus, the admin bar,
     the footer. None of it belongs on a document a student hands to an
     employer.
   *
   * Targeted by id. These rules used to name .rs-letter, which the older prose
   * letter carried; the document does not, so the letter was hidden along with
   * the page around it and what came out of the printer was four blank sheets.
   * The id is on both, and always has been.
   *
   * This first block is the fallback: hide by visibility, then lift the letter
   * to the top-left. It works in any browser, because display:none on an
   * ancestor would take the letter down with it — but the hidden chrome still
   * occupies space, which is where the blank sheets came from. */
  body * { visibility: hidden !important; }

  #rs-letter,
  #rs-letter *,
  .rs-letter,
  .rs-letter * { visibility: visible !important; }

  #rs-letter,
  .rs-letter {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
  }

  /* ------------------------------------------------ and the better way

     The block above is a fallback and has one fatal property: an absolutely
     positioned box is out of the page's flow, and a browser will not break one
     across sheets. So a letter that asks for its signing block to start a new
     page was ignored — "APPROVED BY" stayed at the foot of page one and only
     the overflow reached page two.

     Where :has() is available — every browser anybody prints from now — the
     chrome is taken out of the flow instead of the letter being lifted out of
     it. Nothing above or beside the letter occupies space, so there are no
     blank sheets, and the letter stays an ordinary block that can be broken
     wherever it asks to be. */
  @supports selector(:has(*)) {
    body > *:not(:has(#rs-letter)):not(:has(.rs-letter)):not(#rs-letter):not(.rs-letter),
    .rs-main > *:not(:has(#rs-letter)):not(:has(.rs-letter)):not(#rs-letter):not(.rs-letter),
    .rs-letter-page > *:not(:has(#rs-letter)):not(:has(.rs-letter)):not(#rs-letter):not(.rs-letter),
    .rs-letter-wrap > *:not(:has(#rs-letter)):not(:has(.rs-letter)):not(#rs-letter):not(.rs-letter),
    .entry-content > *:not(:has(#rs-letter)):not(:has(.rs-letter)):not(#rs-letter):not(.rs-letter) {
      display: none !important;
    }

    /* Back into the flow, where page breaks mean something. */
    #rs-letter,
    .rs-letter {
      position: static !important;
      width: auto;
    }

    /* With the chrome gone there is nothing left to hide, and leaving
       visibility:hidden on the ancestors would take the letter with it in any
       engine that resolves the two in the other order. */
    body * { visibility: visible !important; }
  }

  .no-print { display: none !important; }

  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The wrappers a theme puts around page content give up their width and
     spacing, so the letter is not indented twice.
   *
     The letter itself is an <article> too, and this list used to catch it —
     stripping the side padding that holds every line in from the edge of the
     sheet, so headings and rules ran off into the margin. It is excluded by
     name now. */
  .rs-letter-wrap,
  .rs-letter-page,
  .rs-letter-top,
  .rs-letter-body .entry-content,
  .rs-letter-body main,
  .rs-letter-body article:not(.rs-doc):not(.rs-letter) {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* On paper there is no window to be the width of, and a grey band across a
     printed sheet is ink nobody asked for. */
  .rs-letter-top {
    width: auto !important;
    background: none !important;
  }

  .rs-letter {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    font-size: 11.5pt;
  }

  .rs-letter__head,
  .rs-letter__body,
  .rs-letter__foot { padding-left: 0; padding-right: 0; }
  .rs-letter__meta { margin-left: 0; margin-right: 0; }

  /* A signature or a QR code split across two pages is worse than useless. */
  .rs-letter__foot,
  .rs-letter__sign,
  .rs-letter__qr { break-inside: avoid; page-break-inside: avoid; }
  .rs-letter__body p { orphans: 3; widows: 3; }

  /* The default letter used to fill page one almost exactly, so adding a single
     stamp pushed the signature onto a second sheet on its own — which looks
     like a mistake on a document someone hands to an employer. These four
     numbers buy back roughly 20mm, enough for two stamps and a photograph
     before a second page is genuinely needed. */
  .rs-letter { font-size: 11pt; line-height: 1.38; }
  .rs-letter__body p { margin-bottom: 3mm; }
  .rs-letter__title { margin: 4mm 0 3.5mm; }
  .rs-letter__foot { padding-top: 4mm; padding-bottom: 0; }
  .rs-letter__logo { width: 22mm; }

  /* The caption under the QR is worth keeping — people do not always know a
     printed square is scannable — but it does not need a line of its own. */
  .rs-letter__qr { font-size: 6.5pt; }
  .rs-letter__qr img { margin-bottom: 0.8mm; }

  /* Canvas mode opts out of every one of the rules above. The whole point of a
     placed layout is that nothing moves between the screen and the paper, so
     the sheet keeps its exact size and the blocks keep their exact coordinates. */
  .rs-letter--canvas {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    padding: 0 !important;
    font-size: inherit;
    line-height: inherit;
    overflow: hidden;
  }
  .rs-letter--canvas .rs-lblock { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------------------------------------------------------------- look-up */

/* This page draws its own heading, so the theme's page header — the post title
   in large type — has to go, or the words appear twice. The plugin puts
   .rs-letter-body on the page that carries the shortcode; everything below
   strips the wrapper the theme would otherwise impose on a plain page. */
.rs-letter-body .rs-page-header{ display: none }
.rs-letter-body .rs-main > article > .rs-wrap.rs-section{
  max-width: none; padding: 0;
}
.rs-letter-body .rs-prose{ max-width: none }

.rs-letter-page{
  max-width: 1140px; margin-inline: auto;
  /* No padding at the top: the grey panel below starts at the header and
     carries its own. The heading sat a long way down the screen before — 96px
     of air under a header that is already 78px tall. */
  padding: 0 24px clamp(64px, 8vw, 104px);
}

/* The introduction and the lookup box, on one panel.
   The same band used behind What we do and Who we are, for the same reason: it
   says where one block ends and the next begins without drawing a line. The
   steps below stay on white, so the page alternates the way the home page does.

   Edge to edge by the move the other panels use — step out of the centred
   column and take the window's width — because a grey slab with white gutters
   down each side reads as a stray box rather than a band across the page. */
.rs-letter-top{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: clamp(32px, 3.4vw, 56px) clamp(48px, 6vw, 80px);
  /* max() keeps the words on the same 1140px column as every other section and
     never lets the inset fall below a thumb's width on a phone. */
  padding-inline: max(clamp(16px, 4vw, 24px), calc(50vw - (var(--rs-wrap, 1140px) / 2)));
  background: linear-gradient(168deg, #EEF1F9 0%, #E7ECF7 46%, #EFF2FA 100%);
}

/* The page's own introduction, above the box. Same shape as the Contact page:
   a heading with one word in the brand colour, then a single line of what you
   need before you start. */
.rs-letter-intro{
  max-width: 620px; margin: 0 auto 34px; text-align: center;
  font-family: var(--rs-sans, system-ui, sans-serif);
}
.rs-letter-intro h2{
  /* Enough of a gap that the heading and the line under it read as two things,
     not one block of text. Small on purpose: any more and the heading stops
     belonging to the sentence it introduces. */
  margin: 0 0 18px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700;
  line-height: 1.22; letter-spacing: -.008em; color: var(--rs-ink, #16193B);
}
.rs-letter-intro h2 em{ font-style: normal; color: var(--rs-brand, #3B4EE3) }
.rs-letter-intro p{
  margin: 0; color: var(--rs-ink-2, #6A6C86); font-size: .95rem; line-height: 1.7;
}

.rs-letter-lookup {
  max-width: 460px;
  margin: 0 auto;
  /* Above the panel rather than in it. Without this the card's own shadow is
     the only thing separating two close greys and the box loses its edges. */
  position: relative;
  z-index: 1;
  padding: 30px 24px 34px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(22,25,59,.04), 0 18px 40px rgba(22,25,59,.07);
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-line, #E8E9F2);
  font-family: var(--rs-sans, system-ui, sans-serif);
}

.rs-letter-lookup__title { margin: 0 0 8px; font-size: 1.35rem; }

.rs-letter-lookup__lead {
  margin: 0 0 20px;
  color: var(--rs-ink-2, #6A6C86);
  font-size: 0.95rem;
  line-height: 1.55;
}

.rs-letter-lookup__error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fdecec;
  color: #8a1c1c;
  font-size: 0.92rem;
}

/* Nothing has gone wrong here: the details were right and the letter is not
   ready yet. Red would tell them off for doing everything correctly. */
.rs-letter-lookup__notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #eef3fd;
  color: #1e3a72;
  font-size: 0.92rem;
  line-height: 1.55;
}

.rs-letter-lookup__form { display: grid; gap: 16px; }

.rs-letter-lookup .rs-field { display: block; }

.rs-letter-lookup .rs-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* The line under a box, saying what to type in it. Quieter than the label and
   quieter than the answer, because it is neither — it is the thing somebody
   reads once and then never again. */
.rs-letter-lookup .rs-field__hint {
  display: block;
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--rs-ink-2, #6A6C86);
}

.rs-letter-lookup input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--rs-line-2, #DCDEEC);
  border-radius: 10px;
  background: #fff;
  /* 16px exactly. Anything smaller and iOS Safari zooms the page on focus and
     never zooms back, which on a form this short is the whole experience. */
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rs-letter-lookup input:focus-visible {
  outline: 2px solid var(--rs-brand, #3B4EE3);
  outline-offset: 1px;
}

.rs-letter-lookup button { min-height: 48px; }

/* --------------------------------------------------- pictures in the letter */

/* A picture field dropped into the template. Capped rather than free-sized,
   because the person adding a student uploads whatever their phone took and a
   4000px photograph would otherwise push the letter onto a second page. */
.rs-letter__pic {
  display: inline-block;
  max-width: 32mm;
  height: auto;
  vertical-align: middle;
}

.rs-letter__pic--photo {
  display: block;
  width: 28mm;
  border: 0.5pt solid #bbb;
  padding: 1mm;
  background: #fff;
}

/* Stamps inserted through Add Media land as ordinary content images. 38mm is
   about the size of a real rubber stamp on a page, and small enough that adding
   two of them does not push the signature onto a second sheet. */
.rs-letter__body img {
  max-width: 38mm;
  height: auto;
  break-inside: avoid;
  page-break-inside: avoid;
}

.rs-letter__body img.alignright { float: right; margin: 0 0 3mm 4mm; }
.rs-letter__body img.alignleft  { float: left;  margin: 0 4mm 3mm 0; }
.rs-letter__body img.aligncenter { display: block; margin: 3mm auto; float: none; }

/* ==========================================================================
   Canvas mode — the letter as a page rather than a document.

   Everything is positioned in millimetres against a 210x297 sheet, so the
   editor's ruler and the printer's paper agree. No transforms, no scaling: a
   block at 20mm is 20mm on the paper.
   ========================================================================== */

.rs-letter--canvas {
  position: relative;
  width: 210mm;
  height: 297mm;
  min-height: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #fff;
}

/* Their own artwork, covering the whole sheet including the margins — which is
   the point of uploading a design rather than a logo. */
.rs-letter__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.rs-lblock {
  position: absolute;
  z-index: 1;
  line-height: 1.4;
  box-sizing: border-box;
}

.rs-lblock--serif { font-family: "Times New Roman", Times, Georgia, serif; }
.rs-lblock--sans  { font-family: Arial, Helvetica, system-ui, sans-serif; }

.rs-lblock p { margin: 0 0 3mm; }
.rs-lblock p:last-child { margin-bottom: 0; }

.rs-lblock--image img,
.rs-lblock img { max-width: 100%; height: auto; display: block; }

.rs-lblock__qr { width: 100%; height: auto; }

/* Where :has() is understood — every current browser — the chrome is taken out
   of the flow altogether rather than merely made invisible. Nothing that is not
   the letter, inside the letter, or on the path down to it survives, so there
   is no hidden furniture left to generate empty sheets. The letter then runs
   down the page normally instead of being pinned to the corner, which is what
   lets a long one break across two pages properly.

   A browser that does not understand the selector drops these rules and keeps
   the fallback above. */
@media print {
  body *:not(:has(#rs-letter)):not(#rs-letter):not(#rs-letter *) {
    display: none !important;
  }

  #rs-letter {
    position: static !important;
    visibility: visible !important;
    width: auto !important;
  }
}

@media print {
  /* The artwork runs to the edge of the sheet, so the page must have no margin
     of its own. In flowing mode the 20mm margin above still applies; these two
     rules only exist while a canvas letter is on the page. */
  .rs-letter--canvas { box-shadow: none; }
}

@media (max-width: 640px) {
  /* A 210mm page does not fit a phone. Scaling the whole sheet keeps every
     block in the right place relative to the others, which shrinking the page
     with CSS widths would not. */
  .rs-letter--canvas {
    transform-origin: top left;
    transform: scale(var(--rs-page-scale, 0.45));
    margin-bottom: calc(-297mm * (1 - var(--rs-page-scale, 0.45)));
  }
}

/* ------------------------------------------------- how this page works, 1-2-3 */

/* A heading, so the three cards read as an explanation of the form above
   rather than as three loose notes floating under it. */
.rs-steps-head{
  max-width:940px; margin:64px auto 0; padding:0 4px; text-align:center;
  font-family:var(--rs-sans,system-ui,sans-serif);
}
.rs-steps-head h2{
  margin:0 0 8px; font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:700;
  color:var(--rs-ink,#16193B); letter-spacing:-.005em;
}
.rs-steps-head p{ margin:0; color:var(--rs-ink-2,#6A6C86); font-size:.9rem }
.rs-steps-head + .rs-steps{ margin-top:38px }
@media print { .rs-steps-head { display:none !important } }

/* Three equal cards, each with its number sitting on the top edge. The numbers
   are the point of this block — it is a sequence, not three unrelated notes —
   so they are the first thing the eye lands on, and a hairline runs between
   the cards on a wide screen to say "then". */

.rs-steps{
  list-style:none;
  max-width:940px; margin:56px auto 0; padding:0;
  display:grid; gap:22px; align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  font-family:var(--rs-sans,system-ui,sans-serif);
  position:relative;
}

.rs-steps__item{
  position:relative;
  padding:34px 24px 26px;
  background:var(--rs-surface,#fff);
  border:1px solid var(--rs-line,#E8E9F2);
  border-radius:14px;
  box-shadow:0 4px 10px rgba(22,25,59,.04), 0 18px 40px rgba(22,25,59,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rs-steps__item:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(22,25,59,.06), 0 26px 54px rgba(22,25,59,.12);
}

/* the number, straddling the top edge of the card */
.rs-steps__n{
  position:absolute; top:-18px; left:24px;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--rs-brand,#3B4EE3); color:#fff;
  font-size:.88rem; font-weight:700; letter-spacing:.01em;
  box-shadow:0 8px 18px rgba(59,78,227,.32);
}

.rs-steps__item h3{
  margin:0 0 8px; font-size:1rem; font-weight:700;
  color:var(--rs-ink,#16193B); line-height:1.35;
}
.rs-steps__item p{
  margin:0; font-size:.86rem; line-height:1.65; color:var(--rs-ink-2,#6A6C86);
}

/* the hairline between one card and the next, wide screens only */
@media (min-width:760px){
  .rs-steps__item:not(:last-child)::after{
    content:''; position:absolute; top:0; right:-22px; width:22px; height:1px;
    background:var(--rs-line-2,#DCDEEC);
  }
}

@media (max-width:759px){
  .rs-steps{ margin-top:44px; gap:28px }
}

@media print { .rs-steps { display:none !important } }


/* ==========================================================================
   The letter, printed as written
   --------------------------------------------------------------------------
   Nothing is added around it. Whatever the society put in the editor — a
   crest, a heading, a table, a signature — is what appears, on a plain sheet.
   ========================================================================== */
.rs-letter--plain{
  background:#fff;
  max-width:210mm;
  margin:0 auto;
  padding:18mm 20mm;
  box-shadow:0 2px 18px rgba(0,0,0,.08);
}
.rs-letter--plain .rs-letter__body{
  font-family:"Times New Roman", Georgia, serif;
  font-size:12pt;
  line-height:1.55;
  color:#111;
}
.rs-letter--plain .rs-letter__body p{ margin:0 0 10pt }
.rs-letter--plain .rs-letter__body img{ max-width:100%; height:auto }
.rs-letter--plain .rs-letter__body table{ border-collapse:collapse; width:100% }
.rs-letter--plain .rs-letter__body h1,
.rs-letter--plain .rs-letter__body h2,
.rs-letter--plain .rs-letter__body h3{ margin:0 0 8pt }

@media print{
  .rs-letter--plain{ box-shadow:none; margin:0; padding:0; max-width:none }
}