/* ============================================================================
   email.css
   ----------------------------------------------------------------------------
   The two public newsletter surfaces, Subscribe.aspx and Archive.aspx. The
   rules are the first edition's, moved out of the two page-private <style>
   blocks unchanged in effect: the layout-parity rule keeps the appearance, the
   centralization rule moves the mechanism.

   EVERY SELECTOR IS SCOPED UNDER .emailpage. site.css already defines .card,
   .btn, .msg, .lede and .hint globally, and an unscoped .hint here would
   redefine one of them for the whole platform. The wrapper carries
   "authwrap emailpage" so the shared page frame still applies.

   rem and em throughout, and no fixed-height box around anything holding text:
   both pages have to survive 200 percent text and a 390 pixel phone with no
   field escaping its label.

   .sec is on the blocks for js/panel-speak.js, which composes the reading from
   the h1, the .entlede and every .sec. It draws a panel only under .dvpage, so
   on these two pages it is an invisible read-aloud hook and changes nothing an
   eye can see. There is deliberately no rule for it here.
   ============================================================================ */

/* ---- EmailAction.ashx, the standalone confirm/unsubscribe page ------------ */

/* A WHOLE PAGE WITH NO SITE CHROME, reached from a mail client, which is why it
   commits to one light palette rather than following the site theme: the reader
   arrived from an email and has no session, no preference cookie in play and
   often no JavaScript. These are the first edition's values, moved out of the
   handler's <style> block. rem throughout so the reader's own text size scales
   it, and no fixed box around anything holding text. */
body.emailaction{margin:0;padding:2rem 1.25rem;font-family:Georgia,serif;font-size:1rem;
  line-height:1.6;color:#221c14;background:#faf7f2}
body.emailaction main{max-width:34rem;margin:0 auto}
body.emailaction h1{font-size:1.5rem;line-height:1.25;margin:0 0 .75rem}
body.emailaction p{margin:0 0 1rem}
body.emailaction a{color:#8a6b2f}

/* ---- the heading, both pages --------------------------------------------- */

/* THE TAG CHANGED AND THE LOOK DID NOT. The first edition's heading here is
   h2.page, and site.css styles h2.page and not h1.page. js/panel-speak.js reads
   a page's title from its h1, so an h2 title would be silently missing from
   every reading. The tag becomes h1 and this rule is site.css's h2.page block
   verbatim, scoped to this page, so the two are pixel for pixel the same. */
.emailpage h1.page{font-family:var(--serif);font-size:2rem;margin:0 0 6px;font-weight:600}

/* ---- Subscribe.aspx ------------------------------------------------------ */

.emailpage .sbcard{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);
  border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin:18px 0 0;min-width:0}
.emailpage .sbfield{margin:0 0 16px;min-width:0}
.emailpage .sbfield label{display:block;font-weight:600;font-size:.92rem;margin:0 0 4px}
.emailpage .sbfield .help{display:block;color:var(--faint);font-size:.84rem;line-height:1.5;margin:0 0 6px}
.emailpage .sbfield input[type=email]{width:100%;box-sizing:border-box;background:var(--ground);
  border:1px solid var(--edge2);color:var(--ink);border-radius:9px;padding:10px 12px;
  font-size:.94rem;font-family:var(--sans)}
.emailpage .sbmodes{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.emailpage .sbmode{display:flex;gap:10px;align-items:flex-start;min-width:0}
.emailpage .sbmode input{margin-top:.25em;flex:none}
.emailpage .sbmode label{font-size:.92rem;line-height:1.55;font-weight:400;min-width:0}
.emailpage .sbmode label strong{display:block;font-weight:600;margin-bottom:2px}
.emailpage .sbmode label span{color:var(--muted)}
.emailpage .sbnote{color:var(--faint);font-size:.84rem;line-height:1.6;margin:16px 0 0}

/* The fieldset and legend around the two modes. These were style attributes in
   the first edition's markup, which the no-inline-CSS rule does not allow; the
   values are its values. */
.emailpage .sbmodeset{border:0;padding:0;margin:0}
.emailpage .sbmodeset legend{font-weight:600;font-size:.92rem;margin:0 0 8px;padding:0;
  text-transform:none;letter-spacing:0}

/* ---- EmailPreferences.aspx ------------------------------------------------- */

/* Reuses .sbcard, .sbfield, .sbmodeset/.sbmodes/.sbmode from Subscribe.aspx
   above unchanged: the category checkboxes here are the same shape as the
   daily/weekly radios there, and inventing a second set of rules for an
   identical layout is exactly the "two copies, one behind" trap the rest of
   this file's header warns about. Only what is genuinely new is below. */
.emailpage .sbh2{font-family:var(--serif);font-size:1.15rem;margin:0 0 8px;font-weight:600}

/* A DIV LIST WITH ROLES, same reasoning as .arclist below: a name and a
   button read as two things to a screen reader only when they are not
   wrapped in an element that gets spoken whole. */
.emailpage .exlist{margin:12px 0 0}
.emailpage .exlist > div{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--edge);min-width:0}
.emailpage .exlist .t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:.92rem}
.emailpage .exlist .d{color:var(--faint);font-size:.82rem;flex:none}
.emailpage .btnsm{padding:6px 14px;font-size:.84rem;flex:none}

/* ---- Archive.aspx -------------------------------------------------------- */

/* A DIV LIST WITH ROLES, NOT A ul>li, and the reason is the read-aloud.
   js/panel-speak.js recurses into UL but speaks an LI WHOLE, so "Religion of
   the Day: Shinto" and "3 August 2026 . Daily" arrive as one run-on utterance
   with no space between them. A div is a container both ways down, so the title
   and the date line are spoken as two sentences. role="list" and
   role="listitem" keep the semantics a screen reader announces. */
.emailpage .arclist{list-style:none;margin:18px 0 0;padding:0}
.emailpage .arclist > div{padding:12px 0;border-bottom:1px solid var(--edge);min-width:0}
.emailpage .arclist .t{font-weight:600;overflow-wrap:anywhere}
.emailpage .arclist .t a{color:var(--ink);text-decoration:none}
.emailpage .arclist .t a:hover{color:var(--gold)}
.emailpage .arclist .d{color:var(--faint);font-size:.82rem;margin-top:2px}

/* The stored edition body, shown as it was sent. It is the site's own HTML and
   carries its own inline styles, so it is dropped into a plain container rather
   than restyled: an archive that looks different from the email is not one. */
.emailpage .arcbody{border:1px solid var(--edge);border-radius:12px;background:var(--panel);padding:0;
  overflow-x:auto;margin:18px 0 0}
.emailpage .arcbody iframe{width:100%;min-height:60vh;border:0;display:block;background:#fff}
.emailpage .hint{color:var(--faint);font-size:.84rem;line-height:1.5;margin:14px 0 0}