/* StudioDrop — design tokens first, no raw hex below this block. */
:root {
  --ink:        #0d0e12;
  --ink-soft:   #5b6070;
  --muted:      #8a90a2;
  --line:       #e6e8ef;
  --line-soft:  #f0f2f7;
  --panel:      #ffffff;
  --accent:     #2f7dff;
  --accent-dk:  #1f63d8;
  --accent-ink: #ffffff;
  --danger:     #d94a4a;
  /* Neither error nor success: the fallback link, and anything else that is
     an exception rather than a fault. */
  --warn:       #c98a12;
  /* Text weight of the same red: --danger on a red-tinted row is legible but
     thin, and these lines are 12 px. */
  --danger-ink: #a3302f;
  --ok:         #2fb56a;

  --bg-1:       #1b2340;
  --bg-2:       #3d2a5c;
  --bg-3:       #12304f;
  --bg-4:       #0b1020;

  --radius:     18px;
  --radius-sm:  10px;
  --panel-w:    404px;
  --rail-w:     84px;
  --gap:        24px;
  --shadow:     0 18px 50px rgb(6 10 24 / .34);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* `display:` on .drawer/.filesum/.options would otherwise beat the attribute */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ stage */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(90rem 60rem at 12% 18%,  var(--bg-2) 0%, transparent 58%),
    radial-gradient(70rem 55rem at 82% 78%,  var(--bg-3) 0%, transparent 60%),
    radial-gradient(60rem 50rem at 70% 12%,  var(--bg-1) 0%, transparent 62%),
    var(--bg-4);
}

.stage::after {
  /* subtle grain so the gradient doesn't band */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
</filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

.stage-caption {
  position: absolute;
  right: 40px;
  bottom: 34px;
  text-align: right;
  color: var(--accent-ink);
  line-height: 1.5;
  text-shadow: 0 1px 12px rgb(0 0 0 / .5);
  z-index: 1;
}
.stage-caption img {
  display: block;
  width: clamp(150px, 15vw, 230px);
  height: auto;
  /* the mark is a solid block; a soft shadow keeps its white half from
     dissolving into a bright photo */
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / .45));
}

/* ------------------------------------------------------------ rail */

/* Primary navigation. Sits over the photography like the top-right chips, so
   the same translucent-dark treatment keeps it readable on any wallpaper. */
.rail {
  position: absolute;
  top: 50%;
  left: var(--gap);
  transform: translateY(-50%);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / .28);
  background: rgb(20 22 30 / .42);
  backdrop-filter: blur(10px) saturate(1.1);
  z-index: 3;
}
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
  transition: background .15s ease;
}
.rail-item svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-item:hover { background: rgb(255 255 255 / .14); }
.rail-item.is-on { background: rgb(255 255 255 / .22); }
.rail-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

/* ------------------------------------------------------------ panel */

.panel {
  position: absolute;
  top: 50%;
  left: calc(var(--rail-w) + var(--gap) * 2);
  transform: translateY(-50%);
  max-height: calc(100vh - var(--gap) * 2);
  width: var(--panel-w);
  max-width: calc(100vw - var(--gap) * 2);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}

.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.is-active { display: flex; }

.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 30px 6px;
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px 26px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
}

/* ------------------------------------------------------------ dropzone */

.dropzone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 2px 22px;
  border-radius: var(--radius-sm);
  transition: background .15s ease, box-shadow .15s ease;
}
.dropzone.is-over {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.add-btn {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--accent-ink);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.add-btn:hover  { background: var(--accent); transform: scale(1.04); }
.add-btn:active { transform: scale(.97); }

.add-text strong { display: block; font-size: 16px; }
.add-text span   { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.folder-btn {
  display: inline-block; margin-top: 6px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.folder-btn:hover { color: var(--ink); }
.filelist .fmore {
  justify-content: center; color: var(--muted); font-size: 13px;
  padding: 8px 0; border: 0;
}

/* ------------------------------------------------------------ file list */

.filelist { list-style: none; margin: 0 0 4px; padding: 0; }

.filelist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.filelist .fname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filelist .fsize { color: var(--muted); font-variant-numeric: tabular-nums; }
.filelist .fdel {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.filelist .fdel:hover { color: var(--danger); }

.filesum {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ fields */

.fields { padding-top: 4px; }
.fields-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.fields-cap {
  font-size: 11.5px; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 2px;
}

.field + .field { margin-top: 2px; }

.field input,
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 13px 2px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  resize: none;
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------ options */

.options {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--line-soft);
}
.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
}
.opt select,
.opt input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  background: var(--panel);
  outline: none;
  max-width: 160px;
}
.opt select:focus, .opt input:focus { border-color: var(--accent); }

.opt-modes { align-items: flex-start; flex-direction: column; gap: 6px; }
.modes { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.modes label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* ------------------------------------------------------------ buttons */

.cta {
  flex: 1;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.cta:hover:not(:disabled) { background: var(--accent-dk); }
.cta:disabled { opacity: .38; cursor: not-allowed; }

.icon-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 17px;
  letter-spacing: 1px;
  cursor: pointer;
}
.icon-btn:hover, .icon-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
}

.link-btn {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px;
}

/* ------------------------------------------------------------ centered views */

.center {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px;
  gap: 10px;
}
.center h2 { margin: 4px 0 0; font-size: 19px; }
.center-sub  { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.center-note { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

.ring { width: 128px; height: 128px; transform: rotate(-90deg); }
.ring-track, .ring-bar {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.ring-track { stroke: var(--line); }
.ring-bar {
  stroke: var(--accent);
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset .25s ease;
}
.pct {
  margin-top: -84px;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tick {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  display: grid; place-items: center;
}
.tick svg { width: 34px; height: 34px; fill: none; stroke: var(--ok); stroke-width: 4;
            stroke-linecap: round; stroke-linejoin: round; }

.linkbox {
  display: flex;
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.linkbox input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 12px 16px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  outline: none;
}
.linkbox button {
  border: none;
  background: var(--ink);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px;
  cursor: pointer;
}
.linkbox button:hover { background: var(--accent); }

/* ------------------------------------------------------------ history */

.history-btn {
  /* positioned by .topright now — absolute here would stack them */
  border: 1px solid rgb(255 255 255 / .45);
  background: rgb(20 22 30 / .42);      /* readable on bright photos, still see-through */
  backdrop-filter: blur(10px) saturate(1.1);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
  transition: background .15s ease, border-color .15s ease;
}
.history-btn:hover {
  background: rgb(20 22 30 / .62);
  border-color: rgb(255 255 255 / .7);
}

/* The account's company mark, riding inside the Konto button. White artwork on
   the dark chip: the black lockup on a light pill got clipped by the pill's own
   rounded ends, and a badge that did nothing was just decoration. */
.acct-btn { display: inline-flex; align-items: center; gap: 9px; padding-left: 13px; }
.acct-mark {
  height: 17px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5));
}
/* A divider keeps the mark from reading as part of the word. */
.acct-btn .acct-mark:not([hidden]) + span {
  padding-left: 9px;
  border-left: 1px solid rgb(255 255 255 / .34);
}

.drawer {
  position: absolute;
  top: calc(var(--gap) + 52px);   /* clear the top-right buttons */
  right: var(--gap);
  bottom: var(--gap);
  /* Twice the old 380px, but never so wide that it climbs over the compose
     panel — on a small laptop it takes whatever room is actually left. */
  width: min(760px, calc(100vw - var(--rail-w) - var(--panel-w) - var(--gap) * 4));
  min-width: 340px;
  max-width: calc(100vw - var(--gap) * 2);
  container-type: inline-size;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.drawer header button {
  border: none; background: none; font-size: 22px;
  cursor: pointer; color: var(--muted); line-height: 1;
}
.drawer ul { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; flex: 1; }
.drawer li {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.drawer li .h-title {
  font-weight: 600; font-size: 14.5px; line-height: 1.35;
  margin-bottom: 5px; word-break: break-word;
}
.drawer li .h-meta  { color: var(--ink-soft); font-size: 12.5px; }
.drawer li .h-link  {
  /* One line, clipped. Wrapped over two lines the raw URL was the loudest
     thing in the row and buried the title it belonged to. */
  display: block; margin-top: 6px; font-size: 11.5px;
  color: var(--accent); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer li .h-link:hover { text-decoration: underline; }
.drawer .empty { padding: 26px 20px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------ download page */

.dl-files { list-style: none; margin: 14px 0 0; padding: 0; width: 100%; text-align: left; }
.dl-files li { border-bottom: 1px solid var(--line-soft); }

/* The whole row is the download link, and it has to look like one — as plain
   text the filename read as a label and the per-file download went unused. */
.dl-row {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 8px; margin: 0 -8px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.dl-row .fname { flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-row .fsize { color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-row .fdl { display: flex; color: var(--muted); }
.dl-row .fdl svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dl-row:hover { background: var(--line-soft); color: var(--accent); }
.dl-row:hover .fname { text-decoration: underline; }
.dl-row:hover .fdl { color: var(--accent); }
.dl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-msg {
  width: 100%; text-align: left; margin: 6px 0 0;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--line-soft); font-size: 13.5px; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 760px) {
  :root { --gap: 10px; }

  /* Static + margin is predictable; absolute left/right/width fights the
     desktop rule and overflowed the viewport. */
  .stage { position: static; min-height: 100vh; overflow: visible; }
  .panel {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    max-height: none;
    margin: var(--gap);
  }
  .panel-scroll { padding: 20px 18px 6px; }
  .panel-foot { padding: 14px 18px 18px; }

  .stage-caption { display: none; }
  .topright {
    position: static;
    padding: var(--gap) var(--gap) 0;
    justify-content: flex-end;
  }
  .history-btn { border-color: rgb(255 255 255 / .35); }

  .drawer {
    position: fixed;
    inset: 0;
    width: auto;
    margin: 0;
    border-radius: 0;
  }
  .legal-foot { position: static; padding: 4px var(--gap) 16px; }
}

/* ------------------------------------------------------------ v2 additions */

.panel-wide { width: 620px; }

.banner {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px;
}
.banner code { font-size: 12px; }
.banner-warn { background: color-mix(in srgb, var(--accent) 10%, transparent);
               color: var(--ink); }
.banner-err  { background: color-mix(in srgb, var(--danger) 12%, transparent);
               color: var(--ink); }
.drawer-warn { margin: 10px 16px; }

.quota {
  margin: 22px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}
.quota-track {
  height: 6px; border-radius: 99px; background: var(--line);
  overflow: hidden; margin-bottom: 7px;
}
.quota-bar {
  height: 100%; background: var(--accent); width: 0;
  min-width: 3px;                  /* 66 MB of 40 GB must still be visible */
  border-radius: 99px; transition: width .3s ease;
}
.quota-bar.is-high { background: var(--danger); }
.quota-line { display: block; }
.quota-line + .quota-line { margin-top: 3px; }
.quota-line b { font-weight: 600; color: var(--ink); }

.topright {
  position: absolute; top: var(--gap); right: var(--gap);
  display: flex; gap: 8px; z-index: 3;
}

.tabs { display: flex; gap: 2px; padding: 0 14px 10px; flex-wrap: wrap; }
.tabs-break {
  flex-basis: 100%; height: 0; margin: 7px 5px 6px;
  border-top: 1px solid var(--line-soft);
}
.tab {
  border: none; background: none; font: inherit; font-size: 12.5px;
  color: var(--muted); padding: 6px 9px; border-radius: 99px; cursor: pointer;
}
.tab:hover { color: var(--ink-soft); }
.tab.is-on { background: var(--line-soft); color: var(--ink); font-weight: 600; }
/* The admin tabs are a quieter second tier than the three transfer lists. */
.tabs-break ~ .tab { font-size: 12px; }

.h-del {
  margin-top: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-soft); font: inherit; font-size: 11.5px;
  padding: 4px 10px; border-radius: 99px; cursor: pointer;
}
.h-del:hover { border-color: var(--danger); color: var(--danger); }

/* icon actions on a transfer row */
.h-acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.h-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .13s ease, color .13s ease, background .13s ease;
}
.h-act svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.h-act:hover { border-color: var(--accent); color: var(--accent); }
.h-act.is-done { border-color: var(--ok); color: var(--ok); }
.h-act-text span { font-variant-numeric: tabular-nums; }
.h-act-bin { margin-left: auto; }
.h-act-bin:hover { border-color: var(--danger); color: var(--danger); }
/* armed = one click already given; the next one asks for real */
.h-act-bin.is-armed {
  border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  font-weight: 600;
}
.h-lost { font-style: italic; opacity: .8; }

.cta-sm { padding: 9px 14px; font-size: 13px; width: 100%; }
.cta-link { display: block; text-align: center; text-decoration: none; line-height: 1.3; }

.doc-h1 { font-size: 22px; margin: 4px 0 14px; }
.doc-h2 { font-size: 15px; margin: 22px 0 6px; }
.doc-p  { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 8px; }
.doc-p a { color: var(--accent); }

.plain-select {
  width: 100%; border: none; border-bottom: 1px solid var(--line);
  padding: 13px 2px; font: inherit; font-size: 14px; background: transparent;
  outline: none; color: var(--ink);
}

.strong-note { color: var(--ink-soft); font-weight: 500; max-width: 34ch; }

.legal-foot {
  position: absolute; left: var(--gap); bottom: 6px;
  font-size: 11.5px; color: rgb(255 255 255 / .55); z-index: 1;
}
.legal-foot a { color: inherit; text-decoration: none; }
.legal-foot a:hover { color: var(--accent-ink); text-decoration: underline; }

@media (max-width: 700px) {
  .panel-wide { width: auto; }
  .legal-foot { position: static; padding: 10px var(--gap) 14px; }
}

/* ------------------------------------------------------------ mobile, last word
   Must sit at the end of the file: the v2 block above re-declares .topright and
   would otherwise beat the earlier media query at equal specificity. */
@media (max-width: 760px) {
  .topright {
    position: static;
    padding: var(--gap) var(--gap) 0;
    justify-content: flex-end;
  }
  .drawer { position: fixed; inset: 0; width: auto; border-radius: 0; }
  .legal-foot { position: static; padding: 4px var(--gap) 16px; }
  .panel-wide { width: auto; }
}

/* ------------------------------------------------------------ rotating backdrop */

.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.backdrop-layer {
  position: absolute;
  inset: 0;              /* no zoom any more, so no crop headroom needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity;  /* only the crossfade is animated now */
}

  to   { transform: scale(1.07) translate3d(-0.8%, -0.6%, 0); }
}

/* Darkens the left, where the white panel sits, and lifts overall contrast.
   --scrim is set per image from its measured left-third luminance. */
.backdrop-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --scrim: 0.45;
  /* The panel is opaque and covers roughly the left 30%, so darkening at 0%
     is wasted. Peak just to its RIGHT (~32-46%) so the panel edge separates,
     then a bottom vignette so the white caption stays legible. */
  background:
    linear-gradient(95deg,
      rgb(6 8 18 / calc(var(--scrim) * 0.30)) 0%,
      rgb(6 8 18 / calc(var(--scrim) * 0.30)) 28%,
      rgb(6 8 18 / calc(var(--scrim) * 0.92)) 40%,
      rgb(6 8 18 / calc(var(--scrim) * 0.46)) 66%,
      rgb(6 8 18 / calc(var(--scrim) * 0.30)) 100%),
    linear-gradient(to top,
      rgb(4 6 14 / calc(var(--scrim) * 0.85)) 0%,
      rgb(4 6 14 / calc(var(--scrim) * 0.20)) 26%,
      transparent 52%),
    radial-gradient(125% 95% at 50% 45%,
      transparent 42%, rgb(4 6 14 / .30) 100%);
  transition: background 1.2s ease;
}

/* the gradient stays as the fallback until a wallpaper is actually painted */
.stage.has-backdrop::after { opacity: .10; }



/* ------------------------------------------------------------ accounts */

.panel-foot.col { flex-direction: column; align-items: stretch; gap: 10px; }
.foot-links { display: flex; justify-content: space-between; gap: 10px; }
.cta-ghost {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
}
.cta-ghost:hover:not(:disabled) { background: var(--line-soft); }

.oauth-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.oauth-btn {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--panel); transition: border-color .15s ease, background .15s ease;
}
.oauth-btn:hover { border-color: var(--accent); background: var(--line-soft); }

.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px;
      color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.plan-state {
  margin: 14px 0 6px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--line-soft); line-height: 1.5;
}
.plan-state strong { display: block; font-size: 15px; }
.plan-state span   { font-size: 12.5px; color: var(--muted); }
.plan-state.is-active   { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.plan-state.is-inactive { background: color-mix(in srgb, var(--danger) 11%, transparent); }

.acct-rows { margin-top: 16px; }
.acct-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.acct-row span { color: var(--muted); }
.acct-row b { font-variant-numeric: tabular-nums; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.plan {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.plan-head strong { font-size: 16px; }
.plan-price { font-size: 20px; font-weight: 600; }
.plan-price i { font-size: 12px; font-weight: 400; color: var(--muted); font-style: normal; }
.plan-feats { list-style: none; margin: 0; padding: 0; flex: 1;
              font-size: 13px; color: var(--ink-soft); }
.plan-feats li { padding: 5px 0 5px 16px; position: relative; }
.plan-feats li::before {
  content: "·"; position: absolute; left: 4px; color: var(--accent);
  font-weight: 700;
}
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan-price .tbd { font-size: 14px; font-weight: 500; font-style: normal; color: var(--muted); }

/* ------------------------------------------------------------ form basics */

.pw-field { position: relative; }
.pw-eye {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--muted); padding: 4px 2px;
}
.pw-eye:hover { color: var(--accent); }

.field-err {
  margin: 6px 0 0; font-size: 12.5px; color: var(--danger);
}

.cta:disabled, .link-btn:disabled { opacity: .5; cursor: progress; }
#who {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; opacity: .85;
}

/* (5) options: labelled trigger + a summary of what is currently set */
.opt-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 11px 14px;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
  text-align: left;
}
.opt-bar:hover { border-color: var(--accent); }
.opt-bar .opt-sum { color: var(--muted); font-size: 12.5px; }
.opt-bar .chev { transition: transform .18s ease; color: var(--muted); }
.opt-bar.is-open .chev { transform: rotate(180deg); }
.options { margin-top: 8px; }

/* (6) one account menu instead of three chips */
.acct-menu { position: relative; display: flex; align-items: center; gap: 10px; }
.acct-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--panel); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden; z-index: 5;
}
.acct-pop .who {
  padding: 12px 14px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--line-soft); word-break: break-all;
}
.acct-pop a, .acct-pop button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); padding: 11px 14px;
  cursor: pointer; text-decoration: none;
}
.acct-pop a:hover, .acct-pop button:hover { background: var(--line-soft); }

/* (7) the "link not on this device" note as a quiet marker */
.h-note {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 6px;
  background: var(--line); color: var(--ink-soft);
  font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle;
}

/* (9) drawer search + empty states */
.drawer-tools { display: flex; gap: 8px; padding: 0 16px 8px; }
.drawer-tools input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 13px; outline: none;
}
.drawer-tools input:focus { border-color: var(--accent); }
.drawer-tools select {
  flex: 0 0 auto; max-width: 44%;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 10px; font: inherit; font-size: 12.5px;
  color: var(--ink-soft); background: var(--panel); outline: none; cursor: pointer;
}
.drawer-tools select:focus { border-color: var(--accent); }
.drawer-count {
  margin: 0; padding: 0 20px 8px;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.drawer .empty { padding: 34px 20px; color: var(--muted); text-align: center;
                 font-size: 13px; line-height: 1.6; }

/* request-a-file form inside the drawer */
.req-form { padding: 16px 20px 20px; border-bottom: 1px solid var(--line-soft); }
.req-form strong { display: block; font-size: 14px; margin-bottom: 4px; }
.req-form p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.req-form input, .req-form textarea, .req-form select {
  font: inherit; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; outline: none; background: var(--panel);
}
.req-form > input, .req-form > textarea { width: 100%; margin-bottom: 8px; resize: none; }
.req-form input:focus, .req-form textarea:focus, .req-form select:focus {
  border-color: var(--accent);
}
.req-row { display: flex; gap: 10px; margin-bottom: 12px; }
.req-row label { flex: 1; font-size: 11.5px; color: var(--muted);
                 display: flex; flex-direction: column; gap: 4px; }
.req-made { margin-top: 12px; }
.req-made .linkbox { margin-top: 0; }

/* H&S mark, centred over the rotating photography */
.backdrop-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(34vw, 460px);
  max-width: 62vw;
  height: auto;
  opacity: .92;
  /* the photos are bright and busy — without this the white mark dissolves */
  filter: drop-shadow(0 2px 26px rgb(0 0 0 / .55))
          drop-shadow(0 0 2px rgb(0 0 0 / .35));
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  /* the panel fills the screen there, so the mark would sit behind it */
  .backdrop-mark { display: none; }
}
.ask-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ask-row .cta-sm { flex: 0 0 auto; width: auto; }
.ask-note { font-size: 12.5px; color: var(--muted); }

/* home affordances */
.stage-caption a { display: block; text-decoration: none; }
.stage-caption a:hover img { opacity: 1; filter: drop-shadow(0 2px 18px rgb(0 0 0 / .6)); }
.legal-home { font-weight: 600; }

/* visible way back, inside the panel where the eye already is */
.panel-back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.panel-back:hover { text-decoration: underline; }

/* the footer strip was unreadable: 11.5px translucent grey on a photo */
.legal-foot {
  bottom: 10px;
  font-size: 12.5px;
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 6px rgb(0 0 0 / .7);
}
.legal-foot a:hover { text-decoration: underline; }
.legal-home { font-weight: 700; }
.org-site { display: inline-block; margin-top: 4px; font-size: 13px;
            color: var(--accent); text-decoration: none; font-weight: 500; }
.org-site:hover { text-decoration: underline; }

/* per-file rows inside a transfer */
.h-files { margin-top: 10px; padding-left: 2px; border-left: 2px solid var(--line); }
.h-file {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0 6px 10px; font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
}
.h-file:last-child { border-bottom: none; }
.h-file .fname { flex: 1; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.h-del + .h-del { margin-left: 6px; }

/* language switch */
.lang-btn { font-weight: 700; letter-spacing: .04em; padding-left: 14px; padding-right: 14px; }
.lang-float {
  position: absolute; top: var(--gap); right: var(--gap); z-index: 4;
  border: 1px solid rgb(255 255 255 / .45);
  background: rgb(20 22 30 / .42);
  backdrop-filter: blur(10px);
  color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
}
.lang-float:hover { background: rgb(20 22 30 / .62); }
@media (max-width: 760px) { .lang-float { position: static; margin: var(--gap) var(--gap) 0; } }

/* ------------------------------------------------------------ rail: narrow
   Appended last on purpose: at equal specificity a later rule wins, so these
   must sit below every desktop rule they override. */
@media (max-width: 760px) {
  /* No room for a side rail — it becomes a row above the panel. */
  .rail {
    position: static;
    transform: none;
    width: auto;
    flex-direction: row;
    margin: var(--gap) var(--gap) 0;
    border-radius: 999px;
  }
  .rail-item { flex: 1; flex-direction: row; justify-content: center; gap: 8px;
               padding: 10px 6px; font-size: 12.5px; }
  .rail-item svg { width: 18px; height: 18px; }
  .panel { left: auto; }
  /* The narrow rules make .panel static, and a static element takes no
     z-index — so the absolutely-positioned wallpaper painted straight over
     it and the white card vanished. Positioning it puts the stack back. */
  .panel { position: relative; z-index: 2; }
  .acct-mark { height: 15px; }
  .drawer-tools { flex-wrap: wrap; }
  .drawer-tools select { max-width: none; width: 100%; }
}

/* Between the two: keep the rail vertical but drop the labels rather than
   letting it crowd the panel off the screen. */
@media (max-width: 1080px) and (min-width: 761px) {
  :root { --rail-w: 58px; }
  .rail-item span { display: none; }
  .rail-item { padding: 12px 4px; }
}

/* ------------------------------------------------------------ wide drawer
   Keyed to the drawer's own width, not the viewport: it is the drawer that
   grew, and a viewport media query would guess wrong whenever the panel or
   rail changes size. */
@container (min-width: 560px) {
  /* One line of tabs fits now, so the forced break is noise. */
  .tabs-break { display: none; }
  .tabs { gap: 4px; }

  /* Text left, actions right — a row per transfer instead of a stack. */
  .drawer li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 20px;
    padding: 14px 22px;
  }
  .drawer li .h-title { grid-column: 1; margin-bottom: 4px; }
  .drawer li .h-meta  { grid-column: 1; }
  .drawer li .h-acts  { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .drawer li .h-files { grid-column: 1 / -1; }
  .h-act-bin { margin-left: 8px; }

  /* The empty state and the request form are not two-column things. */
  .drawer li.empty, .drawer li.req-form { display: block; }
}

/* (17) two links per transfer -------------------------------------------- */
/* A mirrored transfer carries a studiodrop.de and a hungerundsimmeth.de link.
   Both copy buttons are labelled, which makes the row wider than it was — so
   let it wrap instead of pushing the delete button off the edge. */
.h-acts { flex-wrap: wrap; row-gap: 6px; }
.h-note-wide {
  width: auto; height: 20px; border-radius: 999px; padding: 0 9px;
  font-size: 11px; font-weight: 600; cursor: default; margin-left: 0;
}
/* "create the copy" is an action, not a link — keep it visually quieter than
   the two copy buttons next to it until it has produced something. */
.h-act-make { color: var(--ink-soft); border-style: dashed; }
.h-act-make:disabled { opacity: .6; }

/* (18) the list gets the width ------------------------------------------- */
/* Übertragungen is a table of long file names, two links and a row of
   actions; the compose panel next to it is idle while you are reading it.
   So when the drawer opens, the panel goes and the drawer takes the room.
   Appended last on purpose: at equal specificity the later rule wins. */
@media (min-width: 761px) {
  .drawer { transition: width .22s ease; }

  body.drawer-wide .drawer {
    width: min(1180px, calc(100vw - var(--rail-w) - var(--gap) * 3));
  }
}

/* (19) opening Übertragungen ---------------------------------------------- */
/* The list used to appear and the compose panel to vanish in the same frame,
   which reads as a glitch rather than a change of view. Now they cross-fade:
   the panel slides a little to the left as it goes, the list comes in from
   the right, and the width settles at the same time.
   `visibility` rather than `display` for the panel — it is absolutely
   positioned, so it costs no layout either way, and visibility can be
   transitioned. */
.drawer {
  opacity: 0;
  transform: translateX(12px);
  transition: width .22s ease, opacity .18s ease, transform .22s ease;
}
.drawer.is-open { opacity: 1; transform: none; }

.panel {
  transition: opacity .18s ease, transform .22s ease, visibility .22s;
}

@media (min-width: 761px) {
  body.drawer-wide .panel {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-18px);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .panel { transition-duration: .01ms; }
  .drawer { transform: none; }
}

/* (20) has it arrived? ---------------------------------------------------- */
/* The one question the list is read for, answered before anything is clicked:
   green = the customer collected it, red = their download broke off,
   blue = still waiting. Our own downloads are excluded — checking a delivery
   from the office must not make it look collected.
   The tint is faint and doubled by a bar on the left edge, so the state does
   not rest on colour alone. */
.drawer li.st-done {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  box-shadow: inset 5px 0 0 var(--ok);
}
.drawer li.st-broken {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  box-shadow: inset 5px 0 0 var(--danger);
}
.drawer li.st-none {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 5px 0 0 var(--accent);
}

/* An expanded list is the default now, so it has to sit quietly under the row
   rather than shout for attention. */
.h-picks .h-file.is-own { opacity: .55; }

/* An interrupted pickup is called out in red, line and address alike. It has
   to survive being inside a green row: another attempt succeeding does not
   make this one any less broken. */
.h-picks .h-file.is-broken,
.h-picks .h-file.is-broken .fname { color: var(--danger-ink); }
.h-picks .h-file.is-broken .fsize {
  color: var(--danger-ink);
  font-variant-numeric: tabular-nums;
}


/* Leftover-from-last-transfer notice above the dropzone. Quiet by design:
   it is information, not a warning — nothing is wrong with keeping the files. */
.stale-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px dashed var(--line, #2a2c34);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-soft, #9aa0ab);
}
.stale-note .link-btn { flex: none; }


/* Customer badge on a transfer row. Sits before the title because that is the
   line the eye lands on; in the meta line nobody ever found it. */
.h-cust {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(45, 108, 223, .12));
  color: var(--accent, #2d6cdf);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}


/* Legend for the row tints. Same three colours as the rows themselves, drawn
   as the left-edge bar rather than a filled square, so the mapping is literal. */
.drawer .legend {
  /* `.drawer ul` is the scrolling transfer list and claims flex: 1 — the
     legend is a ul too and was being stretched to half the drawer. */
  flex: 0 0 auto;
  overflow: visible;
  /* `.drawer ul` is more specific than `.legend`, so the indent has to be set
     here or the first swatch sits flush against the drawer edge. */
  padding: 0 20px 12px;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0;
  padding: 0 20px 12px;
  list-style: none;
  font-size: 11.5px;
  color: var(--muted);
}
/* `.drawer li` gives every list item row padding and a divider; the legend
   is a list too, so it has to opt out of all of it. */
.drawer .legend li {
  display: flex; align-items: center; gap: 6px;
  padding: 0; border: 0; font-size: 11.5px;
}
/* Each legend entry is a button now — same look until hovered, so the list
   does not gain three obvious controls it does not need. */
.lg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  margin: -3px -2px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.lg-btn:hover { border-color: var(--line); background: var(--panel); }
.lg-btn.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.lg-n { font-variant-numeric: tabular-nums; opacity: .75; }
.legend .lg {
  width: 14px; height: 14px; border-radius: 4px;
  box-shadow: inset 4px 0 0 currentColor;
}
.legend .lg-done   { color: var(--ok);     background: color-mix(in srgb, var(--ok) 22%, transparent); }
.legend .lg-broken { color: var(--danger); background: color-mix(in srgb, var(--danger) 22%, transparent); }
.legend .lg-none   { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.legend .legend-note { opacity: .8; font-style: italic; }


/* Deleting the webspace copy is destructive but not dangerous — the transfer
   survives. Muted rather than red, so it does not compete with the bin. */
.h-act-drop { color: var(--ink-soft); }
.h-act-drop:hover { color: var(--danger); border-color: var(--danger); }


/* Stale-tab notice. Top centre, above everything, quiet but unmissable. */
.stale-app {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--ink, #14161c);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.stale-app button {
  border: 0; border-radius: 999px;
  padding: 5px 12px;
  background: #fff; color: var(--ink, #14161c);
  font: inherit; font-weight: 600; cursor: pointer;
}


/* Labels above the two link boxes. The pair is only ever understood if each
   one says what it is for — two identical boxes read as two deliveries. */
.link-label {
  margin: 14px 0 6px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
/* The amber frame carries the distinction now; italics on top of it was
   one signal too many. An ID selector beat the .is-fallback rule that
   tried to turn it off, so it goes here. */
#fallbackLabel { font-weight: 600; }


/* Kunde / Intern sits on the same line as the customer name: one decision,
   one row. The select keeps its natural width, the name takes the rest. */
.field-row { display: flex; align-items: baseline; gap: 10px; }
/* Two-state switch: both options visible, the chosen one filled. The radio
   itself is hidden but still the control — keyboard and screen readers work,
   and no JS is needed to know which is selected. */
.seg {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  /* A visible track, so it reads as a switch with two positions rather than
     as one button that happens to have a word next to it. */
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.seg label { position: relative; cursor: pointer; }
.seg input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg span {
  display: block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  /* Was --ink-soft: the unchosen half faded into the panel and the control
     read as one black pill with a ghost beside it. Both options have to look
     like options. */
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.seg label:hover span { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg input:checked + span {
  background: var(--ink, #14161c);
  color: #fff;
  font-weight: 600;
}
.seg input:focus-visible + span { box-shadow: 0 0 0 2px var(--accent); }
.field-row input { flex: 1 1 auto; min-width: 0; }
.field-row input[hidden] { display: none; }

/* Internal deliveries get the same badge shape in a neutral colour — present
   enough to scan for, quiet enough not to look like a customer name. */
.h-cust-int {
  background: color-mix(in srgb, var(--ink-soft) 16%, transparent);
  color: var(--ink-soft);
}


/* A required field that was left empty. Drawn as a ring rather than a border,
   so nothing shifts by a pixel when it appears — these inputs are underlined,
   and swapping the underline for a full border would move the text. */
.field input.is-missing,
.field textarea.is-missing {
  border-bottom-color: var(--danger);
  outline: 1px solid var(--danger);
  outline-offset: 3px;
  border-radius: 4px;
}
.field input.is-missing::placeholder { color: var(--danger); opacity: .75; }


/* The main link on the "Link ist bereit" screen. Green frame, same colour the
   transfer list uses for "collected": it marks the one that is meant to go
   out, so the fallback underneath reads as the exception it is. */
.link-group.is-primary {
  margin-top: 14px;
  padding: 12px 14px 14px;
  border: 1.5px solid var(--ok);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.link-group.is-primary .link-label {
  margin-top: 0;
  color: var(--ok);
}


/* The fallback link. Amber, not green and not red: it is neither the thing to
   send nor an error — it is the exception you reach for when asked. */
.link-group.is-fallback {
  margin-top: 16px;
  padding: 12px 14px 14px;
  border: 1.5px solid var(--warn);
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.link-group.is-fallback .link-label {
  margin-top: 0;
  color: var(--warn);
  font-style: normal;
}
.link-known {
  margin: 0 0 10px;
  text-align: left;
  font-size: 12px;
  color: var(--ink-soft);
}
.link-known strong { color: var(--ink); }


/* The note under the two links is deliberately quiet; the one sentence people
   must not miss is lifted out of it rather than shouting the whole paragraph. */
#mirrorNote strong { color: var(--ink); font-weight: 700; }


/* Verdict badge on a pickup line. Same three colours as the row tints and the
   legend, so one glance down the column answers "ist es angekommen?". */
.pick-tag {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 2px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pick-ok     { background: color-mix(in srgb, var(--ok) 18%, transparent);     color: var(--ok); }
.pick-broken { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.pick-own    { background: color-mix(in srgb, var(--ink-soft) 16%, transparent); color: var(--ink-soft); }


/* Neither green nor grey: a pickup we cannot attribute. Outlined rather than
   filled, so it reads as an open question instead of a verdict. */
.pick-unknown {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 500;
}


/* Two equal ways to add data: single files, or a whole folder. Both carry an
   icon and words — the folder route was a small text link before and people
   simply did not see it, so they zipped folders by hand instead. */
/* The dropzone was a row: icon on the left, text beside it. With two cards in
   it the hint has to go underneath instead of alongside. */
.dropzone { flex-direction: column; align-items: stretch; gap: 0; }

.pick-two {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.pick-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 10px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pick-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.pick-card svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent);
  margin-bottom: 2px;
}
.pick-card strong { font-size: 13.5px; }
.pick-card span   { font-size: 11.5px; color: var(--ink-soft); }
.pick-or {
  align-self: center;
  font-size: 11.5px;
  color: var(--muted);
  text-transform: lowercase;
}
.drop-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 420px) {
  .pick-two { flex-direction: column; }
  .pick-or { align-self: center; }
}




/* "Kunde" prefix inside the badge: darker chip on the chip, so the row reads
   as one label — Kunde Dehner — rather than two competing tags. */
.h-cust em {
  display: inline-block;
  margin: -2px 6px -2px -4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .01em;
}
/* Neither customer nor internal: never asked. Outlined, like every other
   "we do not know" in this screen. */
.h-cust-none {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 500;
}


/* Filter switch in the drawer toolbar. Reads as a chip that is either on or
   off, rather than as a form control with a tick box beside it. */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.chip-toggle input { margin: 0; cursor: pointer; accent-color: var(--accent); }
.chip-toggle:hover { border-color: var(--accent); }
.chip-toggle:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}


/* Explains a control that is deliberately locked. Sits directly under it, so
   nobody hunts for why the dropdown will not move. */
.opt-note {
  margin: -2px 0 4px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.opt select:disabled { opacity: .65; cursor: not-allowed; }


/* Caption above a field group. Same role as .fields-cap in the e-mail block. */
.field-cap {
  margin: 14px 0 4px;
  font-size: 11.5px;
  color: var(--ink-soft);
}


/* The switch sits on its own line above the company field. Its own row rather
   than a .field, so it gets no input underline. */
.seg-row { display: flex; padding: 4px 0 2px; }


/* Vorname bis Firma gehören zusammen: wer schickt, und für wen. Als Kasten
   abgesetzt, damit der Block nicht mit den Empfänger-Feldern darunter
   verschwimmt. Overrides the .fields-group top rule, which drew a plain line
   instead of a frame. */
#fieldsMe.fields-group {
  margin-top: 16px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
#fieldsMe .field-cap { margin-top: 10px; }
#fieldsMe .field input { background: transparent; }


/* The box caption wraps on a narrow panel, so it needs its own line height —
   .fields-cap was written for a single short line. */
#fieldsMe .fields-cap {
  margin-bottom: 8px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}


/* (21) changing your mind ------------------------------------------------- */
/* Red and outlined rather than filled: it must be findable next to
   Übertragen, but never be the button the eye lands on first. */
.cta-cancel {
  flex: 0 0 auto;
  border: 1.5px solid var(--danger);
  border-radius: 999px;
  background: transparent;
  color: var(--danger-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12.5px 20px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cta-cancel:hover {
  background: var(--danger);
  color: var(--accent-ink);
}
.clear-pick {
  align-self: center;
  margin: 8px 0 0;
  border: none;
  background: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger-ink);
  cursor: pointer;
  border-radius: 6px;
}
.clear-pick:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}