/* Project styles of the uploader (loaded after the design package). Colours only via the variables of theme.css,
   so customer branding can later override the variables alone. */

/* Neutral password page: no logo and no company name, only an upload mark */
.auth-brand.neutral { gap: 14px; }
.upload-mark { width: 40px; height: 40px; flex-shrink: 0; background: url("../images/upload-icon.svg") center / contain no-repeat; }

/* Upload page frame */
.uploader-body { background: radial-gradient(1100px 600px at 50% -15%, var(--surface) 0, transparent 70%), var(--ground); min-height: 100dvh; }
.uploader { width: min(760px, 100%); margin: 0 auto; padding: 28px 16px calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.uploader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.uploader-head h1 { margin: 0; font-family: var(--heading-font); font-size: 28px; font-weight: 700; }
.uploader-head .muted { margin-top: 6px; }
.signout { flex-shrink: 0; }
.uploader-foot .locale-switch { display: flex; justify-content: center; gap: 4px; }

.uploader-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uploader-stages li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.step-card { padding: 24px; gap: 18px; }
.step-card > h2 { font-family: var(--heading-font); }
.step-card form { display: grid; gap: 18px; }
.step-card .field label, .step-card .field legend { font-weight: 600; }
.step-card fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.step-card fieldset.field legend { padding: 0; margin-bottom: 6px; }
.field select + input { margin-top: 8px; }
.optional { font-weight: 400; color: var(--muted); }
.step-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.step-actions .btn.large { margin-left: auto; }
#interview-form .step-actions .btn.large { max-width: none; }

.summary { margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--text); font-size: 14px; overflow-wrap: anywhere; }

/* Drop zone */
.dropzone { display: grid; justify-items: center; gap: 4px; padding: 34px 16px; border: 2px dashed var(--border); border-radius: var(--r-large); background: var(--ground); text-align: center; color: var(--muted); cursor: pointer; transition: border-color .15s, background-color .15s; }
.dropzone strong { color: var(--text); font-size: 17px; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-icon { width: 44px; height: 44px; margin-bottom: 6px; background: url("../images/upload-icon.svg") center / contain no-repeat; }

/* File lists */
.file-list { list-style: none; margin: 0; padding: 0; display: grid; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-size { color: var(--muted); font-size: 14px; white-space: nowrap; }
.btn-icon { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.btn-icon:hover { background: rgba(255, 255, 255, .06); color: var(--danger); }

.upload-row { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.upload-row:last-child { border-bottom: 0; }
.upload-row .file-head, .upload-row .file-foot { display: flex; align-items: center; gap: 10px; }
.upload-row .file-foot { justify-content: space-between; }
.upload-row .file-status { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.upload-row .progress-bar { height: 6px; }
.upload-row .progress-bar span { width: 0; transition: width .3s linear; }
.upload-row[data-status="done"] .progress-bar span { background: var(--success); }
.upload-row[data-status="done"] .file-status { color: var(--success); }
.upload-row[data-status="error"] .progress-bar span { background: var(--danger); }
.upload-row[data-status="error"] .file-status { color: var(--danger); }
.upload-row[data-status="uploading"] .file-status, .upload-row[data-status="finalizing"] .file-status { color: var(--text); }

/* Large progress display: ring, facts, heartbeat, big bar */
.progress-hero { display: flex; align-items: center; gap: 24px; }
.ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: var(--line); }
.ring-value { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset .5s ease, stroke .3s; }
.ring-text { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--heading-font); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.progress-hero[data-state="running"] .ring svg, .progress-hero[data-state="stalled"] .ring svg { animation: ring-breathe 2.4s ease-in-out infinite; }
@keyframes ring-breathe { 50% { filter: drop-shadow(0 0 6px var(--accent)); } }
.progress-hero[data-state="done"] .ring-value { stroke: var(--success); }
.progress-hero[data-state="error"] .ring-value, .progress-hero[data-state="cancelled"] .ring-value { stroke: var(--danger); }
.progress-hero[data-state="retrying"] .ring-value, .progress-hero[data-state="stalled"] .ring-value { stroke: var(--muted); }

.progress-facts { display: grid; gap: 4px; min-width: 0; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-state { font-family: var(--heading-font); font-size: 22px; color: var(--text); }
.progress-hero[data-state="done"] .progress-state { color: var(--success); }
.progress-hero[data-state="error"] .progress-state, .progress-hero[data-state="cancelled"] .progress-state { color: var(--danger); }
.progress-hero[data-state="retrying"] .progress-state { color: var(--accent); }

.heartbeat { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 199, 107, .7); } 100% { box-shadow: 0 0 0 10px rgba(76, 199, 107, 0); } }
.progress-hero[data-state="stalled"] .pulse, .progress-hero[data-state="retrying"] .pulse { background: var(--accent); animation-name: pulse-warn; }
@keyframes pulse-warn { 0% { box-shadow: 0 0 0 0 rgba(247, 187, 48, .7); } 100% { box-shadow: 0 0 0 10px rgba(247, 187, 48, 0); } }

/* Big bar: moving stripes show activity even between two chunks */
.big-bar { height: 16px; border-radius: 8px; background: var(--line); overflow: hidden; }
.big-bar span { display: block; height: 100%; width: 0; border-radius: 8px; background-color: var(--accent); transition: width .5s ease; }
.progress-hero[data-state="running"] + .big-bar span,
.progress-hero[data-state="stalled"] + .big-bar span,
.progress-hero[data-state="finalizing"] + .big-bar span {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%, transparent);
  background-size: 28px 28px;
  animation: stripes 1s linear infinite;
}
@keyframes stripes { to { background-position: 28px 0; } }
.progress-hero[data-state="done"] + .big-bar span { background-color: var(--success); }
.progress-hero[data-state="error"] + .big-bar span, .progress-hero[data-state="cancelled"] + .big-bar span { background-color: var(--danger); }

.keep-open { margin: 0; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .ring svg, .pulse, .big-bar span { animation: none !important; }
}

@media (max-width: 560px) {
  .uploader { padding-top: 18px; }
  .uploader-head h1 { font-size: 24px; }
  .step-card { padding: 18px; }
  .progress-hero { flex-direction: column; text-align: center; gap: 14px; }
  .progress-facts { justify-items: center; }
  .uploader-stages li { padding: 8px; font-size: 13px; }
  .step-actions .btn.large { width: 100%; max-width: none; }
  .step-card .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .step-card .tile { min-height: 56px; padding: 10px 12px; gap: 10px; }
}

/* Small label above the project name */
.eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* Step 2: who is uploading (summary), compact drop zone once files are chosen */
.person-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); font-size: 14px; overflow-wrap: anywhere; }
.person-summary .link-btn { flex-shrink: 0; min-height: 32px; }
.dropzone-limit { margin-top: 6px; font-size: 13px; color: var(--muted); }
.dropzone.compact { padding: 16px; grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 14px; }
.dropzone.compact .dropzone-icon { grid-row: span 3; width: 36px; height: 36px; margin: 0; align-self: center; }

/* Details per file */
.file-forms { display: grid; gap: 12px; }
.file-forms:empty { display: none; }
.file-card { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-large); background: var(--ground); }
.file-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-card-head .file-name { font-weight: 600; }
.file-card.all-files { border-color: var(--accent); background: var(--accent-soft); }
.file-card.all-files .file-card-head { display: grid; gap: 2px; }
.file-card.all-files .muted { font-size: 13px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; align-items: start; }
/* label, input and hint of fields side by side share the rows of the grid: the inputs of a row line up even when a
   label needs two lines (labels sit right above their input); fields with more parts and wide fields are left out */
@supports (grid-template-rows: subgrid) {
  .field-grid > .field:not(.wide):not(.checks):not(:has(> :nth-child(4))) { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
  .field-grid > .field:not(.wide):not(.checks):not(:has(> :nth-child(4))) > label { align-self: end; }
  .field-grid > .field.checks { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 6px; min-height: 0; align-self: stretch; }
  .field-grid > .field.checks > * { grid-row: 2; align-self: center; }
}
/* fields side by side: label and input keep their natural height, so all inputs of a row line up; hints go below */
.field { align-content: start; }
.field-grid .field.wide { grid-column: 1 / -1; }
.field-grid .field label { font-size: 14px; font-weight: 600; }
.field-grid select, .field-grid textarea { width: 100%; }
.field .invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 138, 128, .25); }

/* ------------------------------------------------------------ admin area */
.auth-brand-sub { font-size: 14px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.hash-output { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; padding: 10px; border-radius: var(--r); border: 1px solid var(--border); background: var(--ground); color: var(--text); }
.admin .page { width: 100%; max-width: 1920px; }
.admin-form { max-width: none; }
.admin-form.wide { max-width: none; }
.admin-form h2 { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.admin-form .field label, .admin-form .field > .label { font-weight: 600; }
.admin-form .field > .label { display: block; margin-bottom: 6px; }
.admin-form .field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]), .admin-form .field textarea, .admin-form .field select { width: 100%; }
.field-hint { font-size: 13px; color: var(--muted); }
.input-row { display: flex; gap: 8px; align-items: stretch; }
.input-row input { flex: 1; min-width: 0; }
.input-row.prefixed { gap: 0; }
.input-row .prefix { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--surface); color: var(--muted); font-size: 14px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.input-row.prefixed input { border-radius: 0 var(--r) var(--r) 0; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check-row input { width: 22px; height: 22px; accent-color: var(--accent); }
.danger-zone { border-color: rgba(255, 138, 128, .45); }
.status-chip { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font: 600 12px/1.6 var(--body-font); letter-spacing: .02em; }
.status-chip.on { background: var(--success-soft); color: var(--success); }
.status-chip.off { background: rgba(255, 138, 128, .15); color: var(--danger); }
.nowrap { white-space: nowrap; }

/* project list */
.project-list { display: grid; gap: 10px; }
.project-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-large); background: var(--list); }
.project-row:hover { border-color: var(--border); }
.project-name { font-family: var(--heading-font); font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; }
.project-name:hover { color: var(--accent); }
.project-main .muted { margin-top: 4px; }
.project-folder { margin: 6px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.project-password, .project-uploads { display: grid; gap: 4px; font-size: 14px; }
.project-password .muted, .project-uploads .muted { font-size: 12px; }
.copy-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-line code { font-size: 15px; padding: 3px 8px; border-radius: 6px; background: var(--ground); border: 1px solid var(--line); }

/* upload log */
.table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.log-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.log-table .muted { font-size: 13px; }

/* days editor */
.day-list { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--ground); }
.day-chip small { font-size: 12px; }
.day-chip .btn-icon { width: 32px; height: 32px; }
.day-add { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.day-add .field { min-width: 170px; }

/* fields editor */
.field-editor-list { display: grid; gap: 12px; }
.field-editor { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-large); background: var(--ground); }
.field-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.field-editor .checks { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; align-self: end; min-height: 44px; }
.path-preview { margin: 4px 0 0; padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); font-family: ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .project-row { grid-template-columns: 1fr; gap: 10px; }
}

/* settings page */
.settings-intro { max-width: none; }
.settings-form { display: grid; gap: 16px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 2; padding: 12px 0; background: linear-gradient(to top, var(--ground) 70%, transparent); }
@media (max-width: 1023px) { .sticky-actions { bottom: calc(64px + env(safe-area-inset-bottom)); } }

/* phase 6: paused (buffer full) and second stage (passing on to Nextcloud) */
.progress-hero[data-state="paused"] .ring-value { stroke: var(--muted); }
.progress-hero[data-state="paused"] .progress-state { color: var(--accent); }
.progress-hero[data-state="paused"] .pulse { background: var(--accent); animation-name: pulse-warn; }
.progress-hero[data-state="forwarding"] .ring-value { stroke: var(--success); }
.progress-hero[data-state="forwarding"] .progress-state { color: var(--success); }
.progress-hero[data-state="forwarding"] + .big-bar span { background-color: var(--success); background-image: linear-gradient(135deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%, transparent); background-size: 28px 28px; animation: stripes 1.6s linear infinite; }
.upload-row[data-status="forwarding"] .progress-bar span { background: var(--success); }
.upload-row[data-status="forwarding"] .file-status { color: var(--text); }

/* queue page */
.big-number { margin: 0; font-family: var(--heading-font); font-size: 28px; font-weight: 700; }
.big-number.warn { color: var(--danger); }
form.inline { display: inline; }

/* ------------------------------------------------------------ branding (phase 7) */
/* light theme of a project: the light palette of base.css, with a darker default accent for enough contrast */
html.theme-light, .brand-preview.theme-light {
  color-scheme: light;
  --ground: #F7F5F0; --sidebar: #F0ECE3; --surface: #FFFFFF; --list: #FBFAF7;
  --line: #E2DDD1; --border: #D8D2C4; --text: #1E1E1C; --muted: #5E5A52;
  --skel: #DDD7CA; --skel-light: #ECE8DF; --avatar: #E6E1D6;
  --accent: #AD8322; --accent-text: #AD8322; --on-accent: #2A2D31; --accent-soft: rgba(173, 131, 34, .14);
  --success: #1A7F37; --success-soft: rgba(26, 127, 55, .14); --danger: #C62828;
  --shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
html.theme-light .notice.error { background: rgba(198, 40, 40, .08); border-color: rgba(198, 40, 40, .4); color: var(--danger); }
html.theme-light .btn-icon:hover { background: rgba(0, 0, 0, .05); }
html.theme-light .tile { background: var(--surface); }

.uploader-head { align-items: center; }
.uploader-title { flex: 1; min-width: 0; }
.brand-logo { display: block; max-height: 56px; max-width: 160px; width: auto; flex-shrink: 0; object-fit: contain; }
.welcome { padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; background: var(--accent-soft); line-height: 1.5; overflow-wrap: anywhere; }
.thanks { margin: 0; white-space: pre-line; }
@media (max-width: 560px) {
  .uploader-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .brand-logo { grid-column: 1 / -1; max-height: 44px; max-width: 160px; }
}

/* branding tab: form and live preview side by side */
.branding-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; align-items: start; }
.brand-preview-card { position: sticky; top: 16px; }
.brand-preview { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-large); background: var(--ground); color: var(--text); border: 1px solid var(--line); }
.bp-head { display: flex; align-items: center; gap: 12px; }
.bp-logo { max-height: 40px; max-width: 110px; object-fit: contain; }
.bp-title { margin: 0; font-family: var(--heading-font); font-size: 20px; font-weight: 700; }
.bp-card { display: grid; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--list); border: 1px solid var(--line); }
.bp-h { margin: 0; font-weight: 600; }
.bp-input { height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--ground); }
.bp-btn { display: grid; place-items: center; min-height: 40px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; }
#brand-accent-picker { flex: none; width: 52px; min-width: 52px; padding: 2px; height: 44px; border-radius: var(--r); border: 1px solid var(--border); background: var(--ground); }
#brand-contrast { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#brand-contrast.bad, #brand-text-contrast.bad { color: var(--danger); }
@media (max-width: 1100px) { .branding-layout { grid-template-columns: 1fr; } .brand-preview-card { position: static; } }

/* ------------------------------------------------------------ phase 8 */
.verify-panel { display: grid; gap: 14px; }
.verify-panel .code-input { font-size: 26px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; max-width: 260px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mail-test { max-width: 520px; margin-top: 8px; }
.mail-test input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); }
.folder-picker { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ground); }
.folder-crumbs { font-size: 14px; color: var(--muted); }
.folder-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.folder-item { text-align: left; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; font: inherit; }
.folder-item:hover, .folder-item:focus-visible { background: var(--accent-soft); }

/* dashboard */
.progress-bar.mini { width: 96px; height: 4px; margin-top: 6px; }
.log-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.log-head h2 { margin: 0; }
.log-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.log-filter .counter { margin-left: 6px; opacity: .75; font-variant-numeric: tabular-nums; }
.log-day { margin: 20px 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.activity { list-style: none; margin: 0; padding: 0; }
.activity-item { display: grid; grid-template-columns: 44px 10px minmax(0, 1fr); gap: 12px; padding: 9px 0; }
.activity-item + .activity-item { border-top: 1px solid var(--line); }
.activity-time { padding-top: 1px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.activity-item.login .activity-dot { background: #e8a33d; box-shadow: 0 0 0 3px rgba(232, 163, 61, .18); }
.activity-item.locked .activity-dot, .activity-item.error .activity-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(255, 138, 128, .18); }
.activity-body { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.activity-body .muted { font-size: 13px; }
/* typed like a password, but not a password field, so password managers leave it alone */
input.masked { -webkit-text-security: disc; text-security: disc; }

/* ------------------------------------------------------------ phase 9 */
/* settings: tiles leading to the single sections */
.settings-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.settings-tile { display: flex; gap: 14px; align-items: center; min-height: 76px; padding: 14px 16px; border-radius: var(--r-large); border: 1px solid var(--line); background: var(--list); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.settings-tile:hover, .settings-tile:focus-visible { border-color: var(--accent); background: var(--surface); }
.settings-tile-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.settings-tile-text { display: grid; gap: 2px; min-width: 0; }
.settings-tile-title { font-weight: 600; }
.settings-tile-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

/* folder tree of the dashboard */
.folder-tree ul { list-style: none; margin: 0; padding: 0; }
.folder-tree .tree-children { padding-left: 22px; border-left: 1px solid var(--line); margin-left: 13px; }
.tree-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; padding: 2px 6px; border-radius: 8px; }
.tree-row:hover { background: var(--accent-soft); }
.tree-root { font-weight: 600; margin-bottom: 4px; }
.tree-toggle { width: 26px; height: 26px; flex: none; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; transition: transform .15s; }
.tree-toggle[aria-expanded="true"] { transform: rotate(90deg); }
.tree-toggle:disabled { cursor: default; }
.tree-link { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.tree-link:hover { text-decoration: underline; }
.tree-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tree-row.active { background: var(--success-soft); }
.tree-row.active .tree-link { color: var(--success); font-weight: 600; }
.tree-row.pending .tree-link { font-style: italic; }
.tree-badge { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--success); color: var(--on-accent); animation: tree-pulse 1.6s ease-in-out infinite; }
@keyframes tree-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tree-badge { animation: none; } .tree-toggle { transition: none; } }

/* admins, accounts */
.assignment-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.assignment-form input { min-height: 36px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--ground); color: var(--text); font: inherit; font-size: 14px; }
.assignment-form input[type="text"] { flex: 1; min-width: 140px; }
.notice.warn { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r); border: 1px solid rgba(232, 163, 61, .55); background: rgba(232, 163, 61, .12); color: var(--text); font-size: 14px; }
.time-select { display: inline-flex; align-items: center; gap: 6px; }
.time-select select { min-width: 84px; }
.time-select.invalid select { border-color: var(--danger); }
.status-chip.kind { background: var(--accent-soft); color: var(--accent); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.auth-links { margin-top: 16px; font-size: 14px; text-align: center; }

/* confirmation window (deleting a project) */
.confirm-dialog p { margin: 0; }
.confirm-dialog input[type="text"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); font: inherit; }
.confirm-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.confirm-dialog .copy-line code { overflow-wrap: anywhere; }

/* Arideo rule (2026-10-14): tiles and rows of buttons share the width evenly – two 50:50, three a third each,
   four as 2 × 2 – and stand below each other on phones */
.tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.actions:has(> :nth-child(2)) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.actions:has(> :nth-child(2)) > *, .actions:has(> :nth-child(2)) > form > .btn { width: 100%; justify-content: center; }
@media (max-width: 560px) {
  .actions:has(> :nth-child(2)) { grid-auto-flow: row; }
  .tiles:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}
/* the small ↑ ↓ remove buttons in the heads of the field and part editors are a toolbar, not a row of buttons */
.field-editor-head .actions { display: flex; }
.field-editor-head .actions > * { width: auto; }

.secret-toggle { flex: none; width: 48px; padding: 0; display: grid; place-items: center; }
.secret-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* branding tab: more colours, folded in by default */
.more-colors { border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; }
.more-colors > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.more-colors[open] { padding-bottom: 12px; display: grid; gap: 12px; }

/* neutral password page in the light appearance (follows the browser or operating system) */
html.theme-light .auth { background: radial-gradient(900px 500px at 50% -10%, #FFFFFF 0, transparent 70%), var(--ground); }
html.theme-light .auth-brand { color: var(--text); }
html.theme-light .auth-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .1); }
html.theme-light .locale-switch button:hover { background: rgba(0, 0, 0, .05); }

/* folder structure: folder levels and further information, folders as a list with their own IDs */
.level-group { display: grid; gap: 12px; margin-bottom: 18px; }
.level-group > h3 { margin: 0; font-family: var(--heading-font); font-size: 16px; }
.level-group > .field-hint { margin-top: -8px; }
.item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item-row { display: flex; gap: 8px; align-items: center; }
.item-row input { flex: 1; min-width: 0; }
.item-actions { display: flex; gap: 4px; flex: none; }
.item-actions .btn.small { min-width: 44px; min-height: 44px; }
.folder-decision fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 10px; }

/* settings: roles of uploaders, German and English side by side */
.role-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.role-head { font-size: 14px; }
.role-head .item-actions { width: 148px; }
.role-other { margin: 4px 0 0; }
@media (max-width: 560px) { .role-row { grid-template-columns: minmax(0, 1fr); } .role-head { display: none; } }

/* branding tab: mail texts, German and English side by side */
.form-section { margin: 12px 0 0; font-family: var(--heading-font); font-size: 16px; }
.mail-text { border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; }
.mail-text > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.mail-text[open] { padding-bottom: 12px; display: grid; gap: 12px; }
.placeholder-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 12px; font-size: 13px; color: var(--muted); }
.placeholder-list code { color: var(--text); }
.mail-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mail-lang { display: grid; gap: 10px; align-content: start; }
.mail-lang textarea { width: 100%; font-family: inherit; }
@media (max-width: 760px) { .mail-langs { grid-template-columns: minmax(0, 1fr); } }

/* folder structure editor: a fixed grid, so the explanations sit in the second row under the labels */
.field-editor > .field-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .field-editor > .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .field-editor > .field-grid { grid-template-columns: minmax(0, 1fr); } }

/* admin area: small language switch at the bottom of the sidebar (and in "More" on phones) */
.admin-locale { display: flex; gap: 2px; padding: 4px 8px; }
.admin-locale button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; letter-spacing: .04em; min-height: 32px; min-width: 36px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.admin-locale button:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.admin-locale button[aria-current] { color: var(--accent); font-weight: 600; }
.sidebar-collapsed .sidebar .admin-locale { flex-direction: column; align-items: center; padding: 4px 0; }
dialog.more .admin-locale { justify-content: center; padding: 8px 0; }

/* upload page: files that are partly on the server from an earlier visit */
.resume-note ul { margin: 6px 0 0; padding-left: 18px; }
.resume-note li { margin: 2px 0; }

/* folder structure editor: the explanations always start the second row (also without an English label field) */
.field-editor > .field-grid > .row-start { grid-column-start: 1; }

/* links to imprint and privacy policy (password page and upload pages) */
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.legal-links a { color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 6px; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }
.uploader-foot { display: grid; justify-items: center; gap: 2px; }

/* start page: sticky note with an advert for the media upload (Promo), fixed at the top right; on phones below the card */
:root { --note-bg: #FFF3A6; --note-text: #2A2D31; --note-muted: #5E5A52; --note-edge: #E9D873; }
.promo-note { position: fixed; top: 22px; right: 22px; z-index: 5; width: 270px; padding: 22px 18px 16px; background: var(--note-bg); color: var(--note-text);
  border-radius: 3px 3px 14px 3px; border-bottom: 3px solid var(--note-edge); box-shadow: 0 14px 30px rgba(0, 0, 0, .28), 0 2px 4px rgba(0, 0, 0, .18);
  transform: rotate(2.2deg); transition: transform .2s ease; font-size: 14px; line-height: 1.45; }
.promo-note:hover { transform: rotate(0deg) scale(1.02); }
.promo-note::before { content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.promo-note p { margin: 6px 0 10px; color: var(--note-text); text-align: justify; text-align-last: center; hyphens: auto; }
.promo-title { display: block; font-family: var(--heading-font); font-size: 16px; text-align: center; padding: 0 18px; }
.promo-link { display: block; text-align: center; }
.promo-link { color: var(--note-text); font-weight: 600; text-decoration: underline; }
.promo-close { position: absolute; top: 2px; right: 4px; width: 32px; height: 32px; border: 0; background: none; color: var(--note-muted); font-size: 20px; cursor: pointer; border-radius: 50%; }
.promo-close:hover { background: rgba(0, 0, 0, .06); color: var(--note-text); }
@media (max-width: 900px) { .promo-note { position: static; width: auto; max-width: 420px; transform: rotate(-1deg); margin: 18px auto 0; } }
@media (prefers-reduced-motion: reduce) { .promo-note { transition: none; } .promo-note:hover { transform: rotate(2.2deg); } }

/* page /about: advert for the media upload in the style of the public pages of Videoworkers (always dark) */
body.site { background: var(--ground); }
.site-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.site-muted { color: var(--muted); }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--dark); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--heading-font); font-weight: 700; font-size: 20px; text-decoration: none; color: var(--text); }
.site-brand .upload-mark { width: 30px; height: 30px; }
.site-nav { display: flex; gap: 20px; margin-left: 12px; }
.site-nav a, .site-footer-links a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-nav a:hover, .site-footer-links a:hover { color: var(--text); }
.site-actions { display: flex; gap: 8px; margin-left: auto; }
.site .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; }
.site a.btn:not(.primary) { color: var(--text); }
.site-hero { background: linear-gradient(180deg, var(--dark) 0%, var(--ground) 100%); padding: 72px 0 64px; }
.site-hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.site-kicker { color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.site-hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.1; margin: 0; }
.site-lead { font-size: 19px; color: var(--muted); margin: 18px 0 28px; max-width: 34em; line-height: 1.5; }
.site-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.site-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 24px 0 0; color: var(--muted); font-size: 14px; }
.site-facts li::before { content: "✓"; color: var(--success); font-weight: 700; margin-right: 6px; }
.site-hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-large); padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: rotate(-1.5deg); }
.site-upload { display: grid; gap: 8px; }
.site-upload-label { justify-self: start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-accent); background: var(--accent); border-radius: 6px; padding: 2px 8px; }
.site-upload strong { font-family: var(--heading-font); font-size: 20px; overflow-wrap: anywhere; }
.site-progress { height: 14px; border-radius: 7px; background: var(--ground); overflow: hidden; margin-top: 6px; }
.site-progress span { display: block; height: 100%; border-radius: 7px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, #FFD36B 14px 28px); background-size: 40px 40px; animation: site-stripes 1.2s linear infinite; }
@keyframes site-stripes { to { background-position: 40px 0; } }
.site-upload-meta { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; }
.site-upload-state { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; }
.site-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.site-upload-list { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.site-upload-list li { overflow-wrap: anywhere; }
.site-ok { color: var(--success); font-weight: 700; margin-right: 4px; }
.site-section { padding: 64px 0; }
.site-section h2 { font-size: 30px; font-weight: 800; margin: 0 0 8px; }
.site-section h3 { font-size: 18px; margin: 0 0 6px; }
.site-section-alt { background: var(--sidebar); }
.site-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.site-steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.site-steps li::marker { color: var(--accent-text); font-weight: 700; }
.site-steps strong { display: block; }
.site-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 24px; }
.site-feature { background: var(--list); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 16px 18px; }
.site-feature p { margin: 0; line-height: 1.5; }
/* four cards: 2 × 2 (symmetry rule) */
.site-features-pairs { grid-template-columns: repeat(2, 1fr); }
.site-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-top: 40px; background: var(--list); border: 1px solid var(--line); border-radius: var(--r-large); padding: 28px; }
.site-demo h3 { font-size: 22px; margin-bottom: 8px; }
.site-legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.site-legend li { display: flex; align-items: center; gap: 10px; }
.site-swatch, .site-tree li::before { flex: none; width: 18px; height: 14px; border-radius: 3px; }
.site-swatch.folder, .site-tree .folder::before { background: var(--accent); }
.site-swatch.file, .site-tree .file::before { background: var(--text); border-radius: 2px; width: 13px; height: 16px; }
.site-swatch.note, .site-tree .note::before { background: var(--muted); border-radius: 2px; width: 13px; height: 16px; }
.site-tree { width: 100%; box-sizing: border-box; list-style: none; margin: 0; padding: 18px; display: grid; gap: 4px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; }
.site-tree li { display: flex; align-items: center; gap: 10px; min-height: 26px; overflow-wrap: anywhere; }
.site-tree li::before { content: ""; }
.site-tree .note { color: var(--muted); }
.site-tree .d1 { padding-left: 20px; } .site-tree .d2 { padding-left: 40px; } .site-tree .d3 { padding-left: 60px; } .site-tree .d4 { padding-left: 80px; }
.site-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.site-rules > div { border-top: 3px solid var(--accent); padding-top: 14px; }
.site-rules p { margin: 6px 0 0; line-height: 1.5; }
.site-benefits { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.site-benefits li { position: relative; padding-left: 28px; line-height: 1.5; color: var(--muted); }
.site-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; }
.site-benefits strong { color: var(--text); }
.site-join { background: var(--dark); }
.site-join-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-join p { color: var(--muted); max-width: 40em; margin: 10px 0 0; }
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--ground); }
.site-footer-inner { display: grid; grid-template-columns: 1.5fr 2fr auto; gap: 24px; align-items: start; }
.site-footer-brand p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.site-footer .locale-switch { margin: 0; }
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-hero { padding: 40px 0; }
  .site-hero-inner, .site-columns, .site-demo { grid-template-columns: 1fr; }
  .site-hero-card { transform: none; }
  .site-rules { grid-template-columns: 1fr 1fr; }
  .site-join-inner { flex-direction: column; align-items: flex-start; }
  .site-footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-wrap { padding: 0 16px; }
  .site-header-inner { gap: 12px; }
  .site-brand { font-size: 18px; }
  .site-cta .btn { flex: 1 1 100%; }
  .site-rules, .site-features, .site-features-pairs, .site-benefits { grid-template-columns: 1fr; }
  .site-section { padding: 44px 0; }
  .site-demo { padding: 18px; }
  .site-tree .d3 { padding-left: 44px; } .site-tree .d4 { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) { .site-progress span { animation: none; } }

/* settings: API keys (phase 10) */
.api-key-once { border-color: var(--accent); }
.api-key-once code { word-break: break-all; }
.code-block { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--ground); border: 1px solid var(--line); overflow-x: auto; font-size: 13px; line-height: 1.5; white-space: pre; }

/* notices in a dialog keep their line breaks (e.g. the list of problems of the folder structure) */
.confirm-dialog p { white-space: pre-line; }

/* check of presentations and videos (phase 11) */
.status-chip.check { margin-left: 0; }
.status-chip.check.warn { background: var(--accent-soft); color: var(--accent); }
.status-chip.check.note { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.status-chip.check.muted { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.check-details { margin-top: 6px; }
.check-details summary { cursor: pointer; list-style: none; }
.check-details summary::-webkit-details-marker { display: none; }
.check-notes { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.check-notes li { margin: 2px 0; }
.check-notes li.warn { color: var(--text); }
.check-notes li.warn::marker { color: var(--accent); }

.upload-row .file-check { font-size: 14px; }
.upload-row .file-check .check-summary { color: var(--muted); cursor: default; }
.upload-row .file-check details .check-summary { cursor: pointer; }
.upload-row .file-check[data-level="ok"] .check-summary { color: var(--success); }
.upload-row .file-check[data-level="warn"] .check-summary { color: var(--accent); font-weight: 600; }
.upload-row .file-check .check-notes { font-size: 14px; }

/* check before the upload (phase 11) */
.file-card .precheck { display: grid; gap: 6px; margin: 4px 0 10px; font-size: 14px; }
.file-card .precheck[hidden] { display: none; }
.file-card .precheck .check-summary { color: var(--muted); }
.file-card .precheck details .check-summary { cursor: pointer; }
.file-card .precheck[data-level="ok"] .check-summary { color: var(--success); }
.file-card .precheck[data-level="warn"] .check-summary { color: var(--accent); font-weight: 600; }
.file-card .precheck p { margin: 0; font-size: 13px; }
.precheck-fonts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }