/* Website report card page (/zeugnis/): domain form, "grading in progress" loader, paper report card, share row, rankings, how we grade.
   The card itself is paper with fixed colours, so it reads the same in light and dark theme. */
.rcp { --paper: #fbf6ea; --paper-2: #f1e7cf; --ink-b: #1d2747; --ink-s: #5a6177; --rule-c: rgba(29, 39, 71, .22); --red: #c8302a; --stamp: #2c4f9e;
  --g-a: #1f7a4a; --g-c: #2c4f9e; --g-d: #a8650a; --g-f: #c8302a; }
.rcp-hero .h2 { font-size: clamp(32px, 6vw, 58px); line-height: 1.05; letter-spacing: -.01em; }
.rcp-hero .h2::after { content: " 📝"; font-size: .6em; vertical-align: .2em; }

/* ---- form */
.rcp-form { margin: 22px 0 6px; max-width: 640px; }
.rcp-form label { display: block; font: 600 13px var(--font-m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rcp-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rcp-row input { flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel);
  color: var(--text); font: 500 17px var(--font-m); }
.rcp-row input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.rcp-go { flex: 0 0 auto; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 17px var(--font-b);
  cursor: pointer; transition: transform .2s var(--ease), filter .2s; }
.rcp-go:hover { filter: brightness(1.08); transform: translateY(-2px); }
.rcp-go:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.rcp-go[disabled] { opacity: .6; cursor: wait; transform: none; }
.rcp-msg { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 64ch; }
.rcp-msg:empty { display: none; }
.rcp-msg.ok { color: var(--ok); font-weight: 600; }
.rcp-msg.warn { color: var(--accent); font-weight: 500; }

/* ---- loader: a sheet with three subjects, a red pen ticks them off */
.rcl { margin: 18px 0 8px; text-align: center; }
.rcl-sheet { position: relative; max-width: 420px; margin: 0 auto; padding: 22px 64px 22px 26px; border-radius: 6px; text-align: left; color: var(--ink-b);
  background: repeating-linear-gradient(transparent 0 43px, rgba(44, 79, 158, .16) 43px 44px) 0 14px, linear-gradient(135deg, var(--paper), var(--paper-2));
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); transform: rotate(-1deg); }
.rcl-list { list-style: none; margin: 0; padding: 0; }
.rcl-list li { display: flex; align-items: center; gap: 14px; height: 44px; font: 500 italic 19px var(--font-d); opacity: .45; transition: opacity .3s; }
.rcl-list li.cur, .rcl-list li.done { opacity: 1; }
.rcl-box { flex: none; width: 24px; height: 24px; border: 2px solid var(--ink-b); border-radius: 3px; }
.rcl-box svg { width: 100%; height: 100%; overflow: visible; }
.rcl-tick { fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s ease-out; }
.rcl-list li.done .rcl-tick { stroke-dashoffset: 0; }
.rcl-list li.cur .rcl-box { animation: rcl-pulse 1s ease-in-out infinite; }
.rcl-pen { position: absolute; left: 14px; top: 6px; width: 54px; height: 54px; transition: transform .4s var(--ease); pointer-events: none; }
.rcl-pen g { animation: rcl-write .5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.rcl[data-step="1"] .rcl-pen { transform: translateY(44px); }
.rcl[data-step="2"] .rcl-pen { transform: translateY(88px); }
.rcl[data-step="3"] .rcl-pen, .rcl[data-step="4"] .rcl-pen { transform: translateY(132px); }
.rcl-step { margin: 14px 0 0; font: 500 15px var(--font-m); min-height: 1.6em; color: var(--muted); }
@keyframes rcl-pulse { 50% { box-shadow: 0 0 0 4px rgba(200, 48, 42, .18); } }
@keyframes rcl-write { from { transform: rotate(-4deg) translateX(-2px); } to { transform: rotate(4deg) translateX(3px); } }

/* ---- the report card */
.rcd { margin: 26px 0 10px; }
.rc-scene { max-width: 780px; margin: 0 auto; }
.rc-card { position: relative; padding: 30px 34px 26px; color: var(--ink-b); border-radius: 4px;
  background: radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(160deg, var(--paper), var(--paper-2));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 26px 56px -16px rgba(0, 0, 0, .6); outline: 1.5px solid rgba(29, 39, 71, .35); outline-offset: -12px; }
html[data-theme="light"] .rc-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 22px 46px -14px rgba(40, 30, 10, .35); }
.rc-card.arrive { animation: rc-in .8s var(--ease) both; }
@keyframes rc-in { from { transform: translateY(-40px) rotate(-3deg) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

.rc-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--ink-b); }
.rc-crest { width: 50px; height: 56px; }
.rc-crest-sh { fill: var(--stamp); }
.rc-crest-in { fill: none; stroke: #f6e6b8; stroke-width: 1.5; }
.rc-crest-l { fill: #f6e6b8; }
.rc-crest-b { fill: none; stroke: #f6e6b8; stroke-width: 3; stroke-linecap: round; }
.rc-crest-k { fill: var(--stamp); }
.rc-crest-l + .rc-crest-b { stroke-width: 3.2; }
.rc-school { min-width: 0; }
.rc-school b { display: block; font: 700 clamp(15px, 2.2vw, 19px)/1.2 var(--font-d); color: #0f1838; }
.rc-school span { display: block; font: 11px/1.4 var(--font-m); letter-spacing: .04em; color: var(--ink-s); }
.rc-doc { text-align: right; }
.rc-doc h2 { margin: 0; font: 700 clamp(26px, 4.6vw, 40px)/1 var(--font-d); letter-spacing: .02em; color: #0f1838; text-transform: uppercase; }
.rc-doc span { font: 11.5px var(--font-m); color: var(--ink-s); }

.rc-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 14px 0 6px; font-family: var(--font-m); font-size: 13px; }
.rc-meta div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.rc-meta dt { color: var(--ink-s); }
.rc-meta dd { margin: 0; font-weight: 600; color: #0f1838; overflow-wrap: anywhere; }
.rc-meta .rc-for { flex: 1 1 100%; }
.rc-meta .rc-for dd { font: 600 italic clamp(22px, 3.6vw, 30px)/1.15 var(--font-d); border-bottom: 1px dotted var(--ink-s); padding: 0 6px 2px; flex: 1; min-width: 0; }

.rc-table { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: 14px; }
.rc-table thead th { font: 600 11px var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-s); text-align: left; padding: 6px 8px; border-bottom: 1.5px solid var(--ink-b); }
.rc-table tbody th, .rc-table td { padding: 12px 8px; border-bottom: 1px solid var(--rule-c); vertical-align: middle; text-align: left; }
.rc-table tbody th { font: 600 15px var(--font-b); color: #0f1838; width: 30%; }
.rc-g { width: 26%; white-space: nowrap; }
.rc-g b { display: inline-block; min-width: 1.4em; font: 700 30px/1 var(--font-d); margin-right: 8px; vertical-align: middle; }
.rc-g span { font: 500 italic 15px var(--font-d); vertical-align: middle; white-space: normal; }
.rc-n { color: var(--ink-b); font: 13px/1.45 var(--font-m); }
.rc-fix { display: inline-block; margin-top: 2px; font: 600 12.5px var(--font-b); color: var(--stamp); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.rc-fix:hover { color: var(--red); }
.rc-fix:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
tr.g-a .rc-g b, .rc-overall.g-a .rc-word { color: var(--g-a); }
tr.g-b .rc-g b, .rc-overall.g-b .rc-word { color: var(--g-a); }
tr.g-c .rc-g b, .rc-overall.g-c .rc-word { color: var(--g-c); }
tr.g-d .rc-g b, .rc-overall.g-d .rc-word { color: var(--g-d); }
tr.g-f .rc-g b, .rc-overall.g-f .rc-word { color: var(--g-f); }

.rc-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin: 18px 0 4px; }
.rc-k { font: 600 12px var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-s); }
.rc-overall { display: flex; align-items: center; gap: 14px; }
.rc-big { position: relative; display: inline-grid; place-items: center; width: 104px; height: 78px; }
.rc-big b { font: 700 46px/1 var(--font-d); color: var(--red); }
.rc-circle { position: absolute; inset: -6px -10px; width: calc(100% + 20px); height: calc(100% + 12px); overflow: visible; }
.rc-circle path { fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 330; stroke-dashoffset: 0; opacity: .9; }
.rc-card.arrive .rc-circle path { animation: rc-draw .9s .6s ease-out both; }
@keyframes rc-draw { from { stroke-dashoffset: 330; } to { stroke-dashoffset: 0; } }
.rc-word { font: 600 italic 22px var(--font-d); }
.rc-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rc-opt { display: inline-flex; align-items: center; gap: 6px; font: 500 15px var(--font-b); color: var(--ink-s); }
.rc-opt i { position: relative; width: 18px; height: 18px; border: 1.8px solid var(--ink-b); border-radius: 2px; }
.rc-opt.on { color: #0f1838; font-weight: 700; }
.rc-opt.on i::after { content: ""; position: absolute; left: 4px; top: -4px; width: 7px; height: 15px; border: solid var(--red); border-width: 0 3px 3px 0; transform: rotate(40deg); }

.rc-rem { margin: 18px 0 0; padding: 14px 16px 12px; border: 1px dashed rgba(29, 39, 71, .35); border-radius: 4px;
  background: repeating-linear-gradient(transparent 0 calc(1.6em - 1px), rgba(44, 79, 158, .12) calc(1.6em - 1px) 1.6em); }
.rc-rem h3 { margin: 0 0 6px; font: 600 12px var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-s); }
.rc-rem-list { margin: 0; padding: 0 0 0 1.1em; }
.rc-rem-list li { font: 500 italic clamp(16px, 2vw, 19px)/1.6 var(--font-d); color: #22306b; }

.rc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 20px; }
.rc-stamp { flex: none; width: 112px; height: 112px; transform: rotate(-14deg); opacity: .85; mix-blend-mode: multiply; }
.rc-stamp-o { fill: none; stroke: var(--stamp); stroke-width: 3.2; }
.rc-stamp-i { fill: none; stroke: var(--stamp); stroke-width: 1.4; }
.rc-stamp text { fill: var(--stamp); font-family: var(--font-m); }
.rc-stamp-arc { font-size: 8.4px; font-weight: 700; letter-spacing: .04em; }
.rc-stamp-c { font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.rc-stamp-y { font-size: 11px; }
.rc-sig { flex: 0 1 260px; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.rc-sig-name { font: 500 italic 26px/1.1 var(--font-d); color: #22306b; transform: rotate(-3deg); padding-bottom: 2px; }
.rc-sig-line { border-top: 1.5px solid var(--ink-b); padding-top: 4px; font: 11.5px var(--font-m); color: var(--ink-s); letter-spacing: .04em; }

/* ---- share */
.rcd-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; }
.rcd-share button, .rcd-share a, .rcd-friend { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 600 14px var(--font-b); cursor: pointer; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.rcd-share button:hover, .rcd-share a:hover, .rcd-friend:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.rcd-share button:focus-visible, .rcd-share a:focus-visible, .rcd-friend:focus-visible, .rcr-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rcd-share .rcd-wa { background: #25d366; border-color: #25d366; color: #06381b; font-weight: 700; }
.rcd-share .rcd-wa:hover { border-color: #1fb457; }
.rcd-copy.done { border-color: var(--ok); color: var(--ok); }
.rcd-chal { text-align: center; margin: 14px 0 0; }
.rcd-friend { border-style: dashed; border-color: var(--accent); }
.rc-offscreen { position: fixed; left: -9999px; opacity: 0; }

/* ---- rankings + how we grade */
.rcr, .rch { margin-top: 38px; padding: 0; }
.rcr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.rcr-grid a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-decoration: none;
  transition: border-color .2s, transform .2s var(--ease); }
.rcr-grid a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.rcr-grid b { display: block; font: 600 16px var(--font-b); color: var(--accent); margin-bottom: 2px; }
.rcr-grid span { font-size: 14.5px; color: var(--muted); }
.rch-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 0; margin: 14px 0 16px; }
.rch-list li { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.rch-list b { display: block; font: 600 15px var(--font-b); margin-bottom: 4px; }
.rch-list span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---- narrow screens: subjects stack, table becomes rows of blocks */
@media (max-width: 640px) {
  .rc-card { padding: 22px 18px 18px; outline-offset: -7px; }
  .rc-head { grid-template-columns: auto 1fr; gap: 10px; }
  .rc-crest { width: 40px; height: 45px; }
  .rc-doc { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .rc-table thead { display: none; }
  .rc-table, .rc-table tbody, .rc-table tr { display: block; }
  .rc-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule-c); }
  .rc-table tbody th, .rc-table td { display: block; padding: 0; border: 0; width: auto; }
  .rc-table tbody th { align-self: center; }
  .rc-g { text-align: right; }
  .rc-g b { font-size: 26px; margin-right: 4px; }
  .rc-g span { font-size: 13.5px; }
  .rc-n { grid-column: 1 / -1; font-size: 12.5px; }
  .rc-meta .rc-for { flex-direction: column; gap: 2px; }
  .rc-meta .rc-for dd { font-size: 21px; padding: 0 0 2px; width: 100%; }
  .rc-sum { flex-direction: column; align-items: flex-start; }
  .rc-overall { flex-wrap: wrap; gap: 4px 10px; }
  .rc-overall .rc-k { flex: 1 1 100%; }
  .rc-big { width: 86px; height: 66px; }
  .rc-big b { font-size: 40px; }
  .rc-word { font-size: 19px; min-width: 0; overflow-wrap: anywhere; }
  .rc-promo { gap: 6px 10px; }
  .rc-promo .rc-k { flex: 1 1 100%; }
  .rc-opt { font-size: 14.5px; }
  .rc-foot { gap: 10px; }
  .rc-stamp { width: 88px; height: 88px; }
  .rc-sig-name { font-size: 22px; }
  .rcl-sheet { padding: 18px 56px 18px 18px; }
  .rcl-list li { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-card.arrive, .rc-card.arrive .rc-circle path, .rcl-pen g, .rcl-list li.cur .rcl-box { animation: none; }
  .rcl-pen, .rcl-tick, .rcp-go, .rcr-grid a, .rcd-share a, .rcd-share button { transition: none; }
}

/* demo / example domains under the form */
.rcp-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.rcp-ex { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font: 500 13.5px var(--font-m); text-decoration: none; }
.rcp-ex:hover { border-color: var(--accent); text-decoration: none; }
.rcp-ex:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rcp-ex-a { border-color: #2e8b57; background: rgba(46, 139, 87, .12); font-weight: 700; }