/* The Harness Pony Society members' records. Built into public/hps/ by tools/build_hps.py. */
:root {
  --bg: #f4efe4; --paper: #fbf8f1; --ink: #22201b; --muted: #6e675a; --line: #d9cfbc;
  --green: #1f3d2f; --green-ink: #f4efe4; --accent: #8a5a1f;
  /* Sender names in group chats. */
  --w-D: #8a5517; --w-K: #22608f; --w-S: #24693f; --w-B: #9c3a6b; --w-I: #4f559c; --w-T: #a84a20; --w-L: #6a43a0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f; --paper: #1e1c16; --ink: #ece5d6; --muted: #a39a88; --line: #38342a;
    --green: #2c5240; --green-ink: #f4efe4; --accent: #d29a52;
    --w-D: #e0a660; --w-K: #79b4e0; --w-S: #7cc796; --w-B: #e88ab8; --w-I: #a9adec; --w-T: #f0956a; --w-L: #c4a2f0;
  }
}
:root[data-theme="dark"] {
  --bg: #15140f; --paper: #1e1c16; --ink: #ece5d6; --muted: #a39a88; --line: #38342a;
  --green: #2c5240; --green-ink: #f4efe4; --accent: #d29a52;
  --w-D: #e0a660; --w-K: #79b4e0; --w-S: #7cc796; --w-B: #e88ab8; --w-I: #a9adec; --w-T: #f0956a; --w-L: #c4a2f0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Source Sans 3", system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a.seen { opacity: .6; }
header { background: var(--green); color: var(--green-ink); }
.bar { max-width: 760px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.crest { width: 38px; height: 38px; flex: none; }
.brand { color: inherit; text-decoration: none; min-width: 0; }
.brand b { display: block; font-family: "EB Garamond", serif; font-weight: 600; font-size: 20px; letter-spacing: .02em; line-height: 1.1; }
.brand span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
/* Signed in as Mrs H. Sedley, the judge. Sign out returns to Vivian's homepage. */
.account { margin-left: auto; display: flex; align-items: center; gap: 14px; text-align: right; line-height: 1.2; white-space: nowrap; }
.account small { display: block; font-size: 11px; opacity: .75; }
.who b { font-weight: 600; font-size: 14px; }
.sign-out { color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 10px; border: 1px solid rgba(244, 239, 228, .45); border-radius: 4px; }
.sign-out:hover, .sign-out:focus-visible { background: rgba(244, 239, 228, .12); }
@media (max-width: 560px) {
  .brand b { font-size: 17px; }
  .brand span, .account small { display: none; }
  .account { gap: 10px; }
  .who b { font-size: 13px; }
  .sign-out { font-size: 13px; padding: 5px 8px; }
}
@media (max-width: 440px) {
  .crest { display: none; }
  .brand b { font-size: 16px; }
}
@media (max-width: 370px) {
  .who { display: none; }
}
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; overflow-wrap: break-word; }
h1, h2, h3 { font-family: "EB Garamond", serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: 28px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 28px 0 8px; letter-spacing: .04em; text-transform: uppercase; }
h3 { font-size: 18px; margin: 22px 0 4px; }
.kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
/* Breadcrumb: Members' records › Stud book › the pony. */
.crumbs a { color: inherit; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); }
.back { display: inline-block; margin-bottom: 10px; font-size: 15px; }
.hint { font-size: 14px; color: var(--muted); }
.doc { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 20px 18px; margin-top: 12px; }
.doc p { margin: 0 0 10px; }
.doc .meta p { margin: 0; }
.crit { font-style: italic; color: var(--muted); }
.score { font-family: "EB Garamond", serif; font-weight: 600; font-size: 20px; }
.note { font-style: italic; }
.placeholder { border: 1px dashed var(--line); color: var(--muted); font-size: 14px; padding: 10px; text-align: center; margin: 10px 0; }
.dir { list-style: none; padding: 0; margin: 8px 0 0; }
.dir li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.dir li:last-child { border-bottom: 0; }
.dir .hint { display: block; }
.dir .hint.admin { display: inline; }
.chats li { overflow: hidden; }
.chats a { font-weight: 600; }
.chats .when { float: right; display: inline; }
.chats .unheld .name { font-weight: 600; color: var(--muted); }
.chats .unheld { opacity: .75; }
h3 .ref { font-family: inherit; font-size: 13px; }
.entry { margin-bottom: 18px; }
.entry .date { font-family: "EB Garamond", serif; font-weight: 600; font-size: 17px; }
/* Chats */
.chat h2 { text-align: center; }
.chat .day { text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.chat .sys { text-transform: none; letter-spacing: 0; }
.chat-footer { margin-top: 20px; }
.bub { max-width: 82%; width: fit-content; padding: 8px 12px; border-radius: 14px; margin: 4px 0; font-size: 16px; line-height: 1.4; }
.bub.them { background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bub.me { background: var(--green); color: var(--green-ink); margin-left: auto; border-bottom-right-radius: 4px; }
.bub .ts { display: block; font-size: 11px; opacity: .6; margin-top: 2px; }
.bub .from { display: block; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.bub a.from { text-decoration: none; }
.bub a.from:hover, .bub a.from:focus-visible { text-decoration: underline; }
.bub a.from.seen { opacity: 1; }
/* Read aloud, not shown: who sent a bubble that has no visible name. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1 a { color: inherit; text-decoration-thickness: 1px; }
.from.w-D { color: var(--w-D); } .from.w-K { color: var(--w-K); } .from.w-S { color: var(--w-S); } .from.w-B { color: var(--w-B); }
.from.w-I { color: var(--w-I); } .from.w-T { color: var(--w-T); } .from.w-L { color: var(--w-L); }
/* Completion card and footer */
.complete { max-width: 760px; margin: 0 auto 28px; padding: 0 16px; }
.complete div { border: 1px solid var(--accent); border-radius: 6px; padding: 18px; text-align: center; background: var(--paper); }
.complete p { margin: 0 0 8px; }
.complete a { margin: 0 8px; white-space: nowrap; }
footer { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: 13px; text-align: center; }
footer p { margin: 6px 0; }
.count { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; min-height: 1em; }
.rule { font-style: italic; }