/* =========================================================
   Life Archive – Teilen (app/social/, app/home/shared.js)

   Dieselbe Formsprache wie überall: Flächen tragen zwei Eckschnitte
   (oben links, unten rechts), Knöpfe sind Rechtecke mit Sockel, nichts
   ist rund. Die Karten in Shared sind .shr-card – damit gilt auch hier
   die Wahl unter ⋯ › Home › Look › Cards (styles/look.css).

   .sa     Avatar: Bild oder Anfangsbuchstabe im Sechseck (wie die
           Zeichen der Bereiche)
   .sp     ein Beitrag (Kopf, Fotos, Design, Worte, Handgriffe)
   .sd     das Design eines Beitrags – Pond (dunkel, Schein in der Farbe
           des Bereichs) oder Paper (hell); E-ink zeichnet immer Paper
   .fy     eine Zeile in „For you"
   .sf     eine Zeile in den Listen (Freunde, Anfragen, Daten)
   .sx-*   Fenster und Formularteile
   .shr-*  die Bildschirme von Shared (sh- gehört der Leiste, app/shell.js)
   ========================================================= */

/* ---------- Kleinteile -------------------------------------------------- */

.sx-ic {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Avatar: ein Sechseck mit Spitze oben – dieselbe Form wie die Zeichen
   der Bereiche. Ein Bild füllt es, sonst der Anfangsbuchstabe. */
.sa {
  --sa: 34px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--sa);
  height: calc(var(--sa) * 1.1547);
  background: color-mix(in srgb, var(--tone, var(--c-home)) 30%, var(--surface-3));
  color: var(--text-strong);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  overflow: hidden;
}
.sa--xs { --sa: 16px; }
.sa--s  { --sa: 34px; }
.sa--m  { --sa: 44px; }
.sa--l  { --sa: 64px; }
.sa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa__ini { font: 600 calc(var(--sa) * .42) / 1 var(--font); }
.sa--xs .sa__ini { font-size: max(var(--fs-floor, 8px), 8px); }
.sa--koi { background: #ffffff; }
.sa--koi .la-koi { width: 72%; height: 72%; }
.sa--empty { background: var(--surface-3); color: var(--text-subtle); }

/* ---------- Ein Beitrag ---------------------------------------------------- */

.shr-list { display: grid; gap: 14px; }

.sp {
  --cut: 16px;
  display: grid;
  gap: 10px;
  padding: 12px 0 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 55%),
    var(--surface);
}
.sp > * { margin-inline: 14px; min-width: 0; }
.sp > .sp__photos { margin-inline: 0; }

.sp__head { display: flex; align-items: center; gap: 10px; }
.sp__who-link { display: inline-flex; text-decoration: none; }
.sp__who { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; }
.sp__name { color: var(--text-strong); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  color: var(--text-subtle); font-size: 12px;
}
.sp__aud { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.sp__aud .sx-ic { width: 12px; height: 12px; }
.sp__more { width: 36px; height: 36px; padding: 0; }
.sp__more .sx-ic { width: 16px; height: 16px; }

.sp__state { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.sp__state.is-failed { color: var(--danger); }

.sp__title { margin-block: 0; font: 600 17px / 1.25 var(--font); color: var(--text-strong); }
.sp__words { margin-block: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }

.sp__acts { display: flex; align-items: center; gap: 8px; }
.sp__acts .sx-ic { width: 15px; height: 15px; }
.sp__grow, .sd__sp, .sx-bar__gap { flex: 1 1 auto; }

/* Fotos: 4:5, seitwärts wischen, Seitenmarken als kleine Quadrate. */
.sp__photos { position: relative; }
.sp__rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sp__rail::-webkit-scrollbar { display: none; }
.sp__photo {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: var(--ar, .8);
  max-height: 72vh;
  scroll-snap-align: start;
  background: var(--ph, var(--surface-2));
  display: grid;
}
.sp__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp__pg {
  position: absolute; inset: auto 0 10px 0;
  display: flex; justify-content: center; gap: 5px;
  pointer-events: none;
}
.sp__pg i { width: 6px; height: 6px; background: rgba(255, 255, 255, .45); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.sp__pg i.is-on { background: #ffffff; }

/* ---------- Das Design ------------------------------------------------------ */

.sd {
  --cut: 12px;
  --sd-strong: #ffffff;
  --sd-text: #e8e9ec;
  --sd-muted: #a6adbb;
  --sd-line: rgba(255, 255, 255, .12);
  --sd-chip: rgba(255, 255, 255, .08);
  container-type: inline-size;
  clip-path: var(--cut-clip);
  color: var(--sd-text);
}
.sd__in { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 14px; min-height: 100%; }
.sd--pond {
  background:
    radial-gradient(260px 200px at 12% 0%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
    radial-gradient(220px 160px at 100% 100%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%),
    #0f1114;
}
.sd--paper {
  --sd-strong: #0f1114;
  --sd-text: #1b1f27;
  --sd-muted: #565c68;
  --sd-line: rgba(15, 17, 20, .14);
  --sd-chip: rgba(15, 17, 20, .06);
  background: #f4f4f6;
}

.sd__k {
  margin: 0;
  display: flex; align-items: center; gap: 7px;
  font: 600 max(var(--fs-floor, 10px), 10px) / 1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sd-muted);
}
.sd__k > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd__hx {
  flex: none;
  width: 16px; height: 18px;
  background: var(--tone);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
}
.sd__hx::after {
  content: ""; position: absolute; inset: 4px 3px;
  background: #0f1114;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.sd__t { margin: 0; font: 600 18px / 1.2 var(--font); color: var(--sd-strong); overflow-wrap: anywhere; }
.sd__big { margin: 2px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
/* Die große Zahl in der Schrift der App, nicht in Martian Mono: dort wird
   das Tausender-Komma so breit wie eine Ziffer („21 , 688"). */
.sd__big b {
  font: 700 clamp(32px, 12cqi, 48px) / 1 var(--font);
  color: var(--sd-strong);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.sd__big span { font-size: 13px; color: var(--sd-muted); }

.sd__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--sd-line);
}
.sd__facts div { display: grid; line-height: 1.15; min-width: 0; }
.sd__facts b { font: 600 15px var(--font-mono); color: var(--sd-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd__facts span { font-size: max(var(--fs-floor, 11px), 11px); color: var(--sd-muted); }

.sd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sd__list--rule { padding-top: 8px; border-top: 1px solid var(--sd-line); }
.sd__list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--sd-text); min-width: 0; }
.sd__list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd__list li > b { flex: none; font: 600 13px var(--font-mono); color: var(--sd-strong); font-variant-numeric: tabular-nums; }
.sd__more span { color: var(--sd-muted); }
.sd__up { margin-top: 2px; }
.sd__tier {
  font: 700 max(var(--fs-floor, 10px), 10px) / 1 var(--font-mono) !important;
  padding: 3px 5px;
  color: #0f1114 !important;
  background: var(--tier, #f2c14e);
}
.sd__pr {
  display: inline-block; font: 700 max(var(--fs-floor, 9px), 9px) / 1 var(--font-mono); font-style: normal;
  padding: 2px 4px; margin-inline-start: 4px; vertical-align: 1px;
  background: #f2c14e; color: #0f1114;
}
.sd__line { margin: 0; font-size: 13px; color: var(--sd-muted); }

.sd__log { display: grid; }
.sd__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--sd-line); font-size: 13px;
}
.sd__row:last-child { border-bottom: 0; }
.sd__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sd-text); }
.sd__row > span:nth-child(2) { font: 500 12px var(--font-mono); color: var(--sd-muted); text-align: end; }
.sd__row > b { font: 600 12.5px var(--font-mono); color: var(--sd-strong); text-align: end; font-variant-numeric: tabular-nums; }
.sd__row--h > span { font: 600 max(var(--fs-floor, 10px), 10px) var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-muted) !important; }
.sd__row--h > span:nth-child(3) { text-align: end; }

.sd__map { width: 100%; height: auto; color: var(--tone); background: color-mix(in srgb, var(--sd-chip) 100%, transparent); }
.sd--paper .sd__map { color: color-mix(in srgb, var(--tone) 70%, #0f1114); }

.sd__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sd__bars li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 46px; gap: 8px; align-items: center; font: 500 11px var(--font-mono); color: var(--sd-muted); }
.sd__bars i { display: block; height: 8px; background: color-mix(in srgb, var(--tone) 70%, transparent); }
.sd__bars b { font-weight: 600; text-align: end; color: var(--sd-text); }
.sd__bars li.is-best i { background: var(--sd-strong); }
.sd__bars li.is-best b { color: var(--sd-strong); }

.sd__macros { display: grid; gap: 6px; }
.sd__macro { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 8px; align-items: center; font-size: 12px; color: var(--sd-muted); }
.sd__macro i { display: block; height: 8px; background: var(--sd-chip); }
.sd__macro em { display: block; height: 100%; }
.sd__macro b { font: 600 12px var(--font-mono); text-align: end; color: var(--sd-strong); }

.sd__grow { flex: 1 1 auto; }
.sd__foot { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sd-muted); }
.sd__foot .sa { --tone: var(--c-home); }

.sd--compact .sd__in { padding: 12px 12px 10px; gap: 6px; }
.sd--compact .sd__big b { font-size: 28px; }
.sd--compact .sd__list,
.sd--compact .sd__foot,
.sd--compact .sd__log .sd__row:nth-child(n+5) { display: none; }

/* ---------- For you ---------------------------------------------------------- */

.fy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
}
.fy__body { display: grid; gap: 4px; min-width: 0; }
.fy__body > b { color: var(--text-strong); font-size: 14.5px; font-weight: 600; }
.fy__meta { font-size: 12.5px; color: var(--text-subtle); }
.fy__text { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.fy__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Eine Mitteilung des Betreibers (Entfernt, Meldung erledigt): leise getönt,
   damit sie nicht wie ein Beitrag eines Freundes aussieht. */
.fy--notice { background: color-mix(in srgb, var(--c-home) 6%, var(--surface)); }

/* ---------- Zeilen -------------------------------------------------------------- */

.shr-rows { display: grid; gap: 8px; }
.sf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  text-align: start;
  font: inherit;
  border: 0;
  cursor: pointer;
}
.sf:hover { background: color-mix(in srgb, rgb(var(--o)) 6%, var(--surface)); }
.sf:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.sf__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sf__body b { color: var(--text-strong); font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf__body small { color: var(--text-subtle); font-size: 12.5px; line-height: 1.35; }
.sf__code { font-family: var(--font-mono) !important; letter-spacing: .04em; }
.sf__ic { width: 18px; height: 18px; color: var(--text-muted); }
.sf__go { width: 12px; height: 12px; color: var(--text-subtle); transform: rotate(-90deg); }
.sf--danger .sf__body b, .sf--danger .sf__ic { color: var(--danger); }

/* ---------- Fenster -------------------------------------------------------------- */

.sx-pop .pop__body { gap: 14px; }
.sx { display: grid; gap: 14px; }
.sx-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); display: flex; gap: 8px; align-items: flex-start; }
.sx-note .sx-ic { margin-top: 2px; }
.sx-note.is-warn, .shr-status.is-warn { color: var(--danger); }
.sx-preview { display: grid; }
.sx-preview .sd { max-width: 340px; width: 100%; margin-inline: auto; }

.sx-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.sx-actions > * { min-height: 44px; }
.sx-actions .sx-ic { width: 15px; height: 15px; }

.sx-opt {
  --cut: 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  cursor: pointer;
}
.sx-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-strong); }
.sx-opt > span { display: grid; gap: 2px; min-width: 0; }
.sx-opt b { color: var(--text-strong); font-weight: 600; font-size: 14px; }
.sx-opt small { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.sx-opt small a { color: var(--text-strong); text-underline-offset: 2px; }
.sx-opt.is-off { opacity: .85; cursor: default; }

.sx-choices { display: grid; gap: 8px; }
.sx-choice {
  --cut: 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  text-align: start;
  font: inherit;
  clip-path: var(--cut-clip);
  cursor: pointer;
}
.sx-choice:hover { background: color-mix(in srgb, rgb(var(--o)) 8%, var(--surface-2)); }
.sx-choice:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.sx-choice > span { display: grid; gap: 2px; min-width: 0; }
.sx-choice b { color: var(--text-strong); font-weight: 600; font-size: 14px; }
.sx-choice small { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.sx-choice .sx-ic { width: 18px; height: 18px; color: var(--text-muted); }
/* Gewählt: Zustand in der Fläche, nicht am Rand (Rand und Schnitt vertragen sich nicht). */
.sx-choice.is-on { background: color-mix(in srgb, rgb(var(--o)) 16%, var(--surface-2)); }
.sx-choice.is-on .sx-ic { color: var(--text-strong); }
.sx-choice.is-lead { background: color-mix(in srgb, var(--accent-app) 14%, var(--surface-2)); }
.sx-choice--radio { grid-template-columns: 20px minmax(0, 1fr); }
.sx-choice--radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-strong); }

.sx-sep { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-subtle); }
.sx-sep::before, .sx-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sx-input {
  --cut: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: var(--surface-2);
  color: var(--text-strong);
  font: 500 15px var(--font);
  clip-path: var(--cut-clip);
}
.sx-input:focus { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.sx-input::placeholder { color: var(--text-subtle); }
.sx-input--area { min-height: 110px; resize: vertical; line-height: 1.45; }
.sx-idform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.sx-idform .sx-input { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sx-found { padding: 12px 14px; display: grid; gap: 8px; }
.sx-found b { color: var(--text-strong); }
.sx-found small { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.sx-link { font: 500 12px var(--font-mono); color: var(--text); overflow-wrap: anywhere; user-select: all; }

.sx-people { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.sx-person { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; cursor: pointer; }
.sx-person input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-strong); }
.sx-person span:last-child { color: var(--text-strong); font-weight: 500; }

.sx-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.sx-step__ctl { display: inline-flex; align-items: center; gap: 12px; }
.sx-step__ctl b { min-width: 28px; text-align: center; font: 600 16px var(--font-mono); color: var(--text-strong); }

.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip {
  --depth: 2px;
  position: relative;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 500 13px var(--font);
  box-shadow: inset 0 0 0 1px rgba(var(--o), .26), var(--depth) var(--depth) 0 rgba(var(--o), .22);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.sx-chip:active { transform: translate(var(--depth), var(--depth)); box-shadow: inset 0 0 0 1px rgba(var(--o), .26); }
.sx-chip.is-on { background: var(--text-strong); color: var(--bg); box-shadow: var(--depth) var(--depth) 0 rgba(var(--o), .4); }
.sx-chip:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

.sx-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; background: var(--surface-2); cursor: pointer; font-size: 13.5px; }
.sx-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-strong); }

/* Teilen neben „Done": Done bleibt der Hauptknopf, Teilen steht still daneben. */
.sx-finish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; width: 100%; align-items: stretch; }
.sx-finish > * { min-height: 50px; margin: 0 !important; width: 100% !important; }

/* Der Streifen des Composers klebt unter der Topbar – wie im Termin-Formular. */
.sx-bar {
  position: fixed;
  inset-inline-start: 50%;
  top: calc(var(--safe-top, 0px) + var(--sh-top-h, 56px) + 6px);
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 8px 10px;
  background: var(--surface-3);
  filter: drop-shadow(0 6px 18px rgba(var(--o-deep), .6));
}
.sx-bar .sx-ic { width: 15px; height: 15px; }
.shr-new { padding-top: 62px; }

/* ---------- Shared: die Bildschirme ------------------------------------------------- */

.shr-page { gap: 22px; }
.shr-bar { display: flex; justify-content: flex-start; }
.shr-bar .sx-ic { width: 16px; height: 16px; }
.shr-wide { width: 100%; min-height: 48px; }
.shr-status { margin: 0; font-size: 13px; color: var(--text-muted); }
.shr-status a { color: var(--text-strong); text-underline-offset: 2px; }

.shr-intro__list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.shr-intro__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text); }
.shr-intro__list .sx-ic { margin-top: 2px; color: var(--text-muted); }
.shr-intro .btn3d { justify-self: start; }

.shr-empty { padding: 18px; display: grid; gap: 10px; justify-items: start; }
.shr-empty__title { margin: 0; font: 600 17px var(--font); color: var(--text-strong); }

.shr-more { display: flex; justify-content: center; }
.shr-caught { display: grid; justify-items: center; gap: 6px; padding: 10px 0 4px; color: var(--text-muted); font-size: 13px; }
.shr-caught b { color: var(--text-strong); font-weight: 600; }
.shr-caught__hx {
  width: 34px; height: 39px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-nutrition) 22%, transparent);
  color: var(--c-nutrition);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.shr-prof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; }
.shr-prof__body { display: grid; gap: 4px; min-width: 0; }
.shr-prof__name { margin: 0; font: 600 20px var(--font); color: var(--text-strong); overflow-wrap: anywhere; }
.shr-prof__meta { margin: 0; font-size: 13px; color: var(--text-muted); }
.shr-prof__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.shr-id { padding: 16px; display: grid; gap: 10px; }
.shr-id__code { margin: 0; font: 600 24px var(--font-mono); letter-spacing: .08em; color: var(--text-strong); user-select: all; }
.shr-id__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.shr-id__acts .sx-ic { width: 14px; height: 14px; }
.shr-id__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.shr-id__mode { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.shr-mini .hb-seg__item { flex: 1; justify-content: center; font: inherit; border: 0; cursor: pointer; }

.shr-off__list { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--text); }

.shr-on__card { padding: 18px; display: grid; gap: 14px; }
.shr-on .shr-prof { padding: 0; }
.shr-consent { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }

.shr-doc { padding: 18px; display: grid; gap: 8px; }
.shr-doc__h { margin: 10px 0 0; font: 600 15px var(--font); color: var(--text-strong); }
.shr-doc__p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-line; }
.shr-doc__ver { color: var(--text-subtle); font-size: 12.5px; }

.shr-lock { padding: 22px 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.shr-lock__hx {
  width: 54px; height: 62px; display: grid; place-items: center;
  background: color-mix(in srgb, rgb(var(--o)) 10%, transparent);
  color: var(--text-strong);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.shr-lock__hx .sx-ic { width: 22px; height: 22px; }
.shr-lock__title { margin: 0; font: 600 18px var(--font); color: var(--text-strong); }
.shr-lock .shr-hero__text { max-width: 34ch; }
.shr-lock__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

.shr-banner {
  --cut: 8px;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--c-calendar) 12%, var(--surface));
  clip-path: var(--cut-clip);
}
.shr-banner .sx-ic { color: var(--c-calendar); width: 14px; height: 14px; }

.shr-invite { padding: 22px 18px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.shr-invite .sx-actions { justify-content: center; }
/* Haken und Satz bleiben beisammen, auch wenn der Satz umbricht. */
.shr-check { margin: 0; display: flex; align-items: flex-start; gap: 8px; max-width: 34ch; text-align: start; font-size: 13px; line-height: 1.4; color: var(--c-nutrition); }
.shr-check .sx-ic { width: 14px; height: 14px; margin-top: 2px; }

.shr-safety { margin: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 8px 14px; font: 600 16px var(--font-mono); color: var(--text-strong); }


.shr-new__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.shr-new__group { display: grid; gap: 8px; }
.shr-new__label { font: 600 max(var(--fs-floor, 11px), 11px) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.shr-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.shr-thumb {
  --cut: 8px;
  position: relative;
  margin: 0;
  width: 84px;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
}
.shr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shr-thumb .btn3d { position: absolute; inset-inline-end: 6px; top: 6px; width: 28px; height: 28px; padding: 0; }
.shr-thumb--add { display: grid; place-items: center; align-content: center; gap: 4px; cursor: pointer; color: var(--text-muted); font-size: 12px; text-align: center; }
.shr-thumb--add .sx-ic { width: 20px; height: 20px; }

@media (min-width: 720px) {
  .shr-list { gap: 18px; }
  .sp > * { margin-inline: 18px; }
  /* Am Rechner liest sich ein Feed in einer Spalte von Telefonbreite und
     etwas mehr – breiter werden die Karten nur lang, nicht klarer. */
  .shr-page { width: min(100%, 640px); margin-inline: auto; }
}

/* ---------- E-ink: alles auf Papier ------------------------------------------- */

html[data-eink] .sd--pond {
  --sd-strong: #000000; --sd-text: #000000; --sd-muted: #000000;
  --sd-line: #000000; --sd-chip: #ffffff;
  background: #ffffff;
}
html[data-eink] .sd--paper { --sd-muted: #000000; --sd-line: #000000; background: #ffffff; }
html[data-eink] .sd { outline: 2px solid #000000; outline-offset: -2px; }
html[data-eink] .sd__hx,
html[data-eink] .sd__tier,
html[data-eink] .sd__pr { background: #000000 !important; color: #ffffff !important; }
html[data-eink] .sd__hx::after { background: #ffffff; }
html[data-eink] .sd__bars i,
html[data-eink] .sd__macro em { background: #000000 !important; }
html[data-eink] .sd__map { color: #000000; }
html[data-eink] .sp,
html[data-eink] .fy,
html[data-eink] .sf,
html[data-eink] .sx-opt,
html[data-eink] .sx-choice,
html[data-eink] .sx-input,
html[data-eink] .sx-toggle,
html[data-eink] .shr-thumb,
html[data-eink] .shr-banner { background: #ffffff; color: #000000; }
html[data-eink] .sx-choice.is-on,
html[data-eink] .sx-chip.is-on { background: #000000; color: #ffffff; }
html[data-eink] .sx-chip { color: #000000; box-shadow: inset 0 0 0 2px #000000, 2px 2px 0 #000000; }
html[data-eink] .sa { background: #000000; color: #ffffff; }
html[data-eink] .sa--koi { background: #ffffff; outline: 2px solid #000000; }
html[data-eink] .sx-bar { background: #ffffff; filter: none; outline: 2px solid #000000; }
html[data-eink] .shr-caught__hx,
html[data-eink] .shr-lock__hx { background: #000000; color: #ffffff; }
html[data-eink] .shr-check,
html[data-eink] .sx-note.is-warn,
html[data-eink] .shr-status.is-warn,
html[data-eink] .sf--danger .sf__body b { color: #000000; }

@media (prefers-reduced-motion: reduce) {
  .sp__rail { scroll-behavior: auto; }
}
html[data-reduce-motion] .sp__rail { scroll-behavior: auto; }