/*
 * Layout of the portal pages. Tokens, typography and components are in tokens.css
 * (linked first); this file only places them: header with the text logo, main column,
 * footer, the invite, the form, the status list and the admin tables.
 *   .site-header .logo .logo-accent .logo-tagline   header with the brand from the settings
 *   .invite .invite-card .steps .invite-art           the invite (first view of /z/<token>);
 *                                                     the home page / reuses them
 *   .privacy                                          the privacy page /prywatnosc
 *   .form-section .works .work .slot .file-name       the form; a staged photo in a work slot
 *   .error-summary .photo-hint .consents              errors on top, photo hint, consents
 *   .save-link .work-list .thumb .work-body .work-title .photo-note
 *                                                     the status page
 *   .state-card                                       already sent, 404, 503, errors
 *   .admin-head .stats .stat .rows .row .facts        the admin panel: rows instead of wide
 *                                                     tables, one column on a phone
 */

body { display: flex; flex-direction: column; min-height: 100vh; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s2);
  padding: var(--s2);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.logo {
  min-width: 0;
  margin: 0;
  font: 1.5rem/1.2 var(--serif);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.logo-accent { color: var(--ochre); }
.logo-tagline {
  margin-left: 12px;
  font: 0.6875rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre);
  white-space: nowrap;
}
@media (min-width: 40rem) {
  .site-header { padding: 20px var(--s3); }
  .logo { font-size: 1.625rem; }
}

main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: var(--s3) var(--s2) var(--s5); }
.admin main { max-width: 72rem; }

/* invite: text and a quiet composition of the token colours (no image) */
.invite { display: grid; gap: var(--s4); margin: 0 0 var(--s5); }
.invite-card { margin: var(--s3) 0; }
.invite-card h2 { margin-top: 0; font-size: 1.375rem; }
.invite-card .btn { width: 100%; }
.steps { padding: 0; list-style: none; }
.steps > li { margin: 0 0 12px; }
.step-no { font-weight: 700; }
.invite-art {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--soft);
  border-radius: 2px;
}
.invite-art::before, .invite-art::after, .invite-art span {
  content: "";
  position: absolute;
  display: block;
}
.invite-art::before {  /* dark green slab */
  left: 12%; top: 16%; width: 52%; height: 100%;
  background: var(--green);
  transform: rotate(-4deg);
}
.invite-art span {  /* pale strip behind the ochre */
  left: 30%; top: 58%; width: 30%; height: 60%;
  background: var(--surface);
  transform: rotate(-12deg);
}
.invite-art::after {  /* ochre square */
  left: 37%; top: 42%; width: 66%; height: 70%;
  background: var(--ochre);
  transform: rotate(-12deg);
}
@media (min-width: 40rem) { .invite-card .btn { width: auto; } }
@media (min-width: 56rem) {
  main:has(.invite) { max-width: 72rem; }
  .invite { grid-template-columns: 3fr 2fr; align-items: start; }
  .invite-art { margin-top: var(--s5); }
  .form-section { max-width: 46rem; }
}

/* form */
.form-section { scroll-margin-top: var(--s2); }
fieldset {
  min-width: 0;
  margin: 0 0 var(--s2);
  padding: var(--s2) var(--s2) var(--s1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (min-width: 40rem) { fieldset { padding: var(--s3) var(--s3) var(--s2); } }
legend { padding: 0 6px; font: 1.1875rem/1.3 var(--serif); }
fieldset details { margin-top: var(--s2); }
.works .work { margin: var(--s3) 0 var(--s2); padding: var(--s2); background: var(--paper); }
.works .work legend { font: 600 1rem/1.3 var(--sans); }
fieldset.rejected { border: 2px solid var(--danger); }
.photo-hint { font-size: 0.9375rem; }
.error-summary h2 { margin: 0 0 var(--s1); font-size: 1.25rem; }
.error-summary ul { padding-left: 1.25rem; }
.error-summary li { margin: 0 0 4px; }
.error-summary a { color: var(--danger); font-weight: 600; }
.consents .field { margin-bottom: var(--s2); }
.consents .btn { width: 100%; }
@media (min-width: 40rem) { .consents .btn { width: auto; } }
.slot { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 var(--s2); }
.slot p { margin: 0 0 4px; }
.file-name { font-weight: 600; overflow-wrap: anywhere; }
input.copy { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; }
form.inline { display: inline; }

/* status page */
.save-link h2 { margin: 0 0 var(--s2); font-size: 1.25rem; }
.work-list { padding: 0; list-style: none; }
.work-list > li { display: flex; gap: var(--s2); align-items: flex-start; }
.thumb { width: 96px; height: auto; flex: none; border-radius: 4px; }
.work-body { flex: 1; min-width: 0; }
.work-title { display: block; font-weight: 600; }
.work-body .actions { margin: var(--s1) 0 0; }
.photo-note {
  margin: var(--s1) 0 0;
  padding: 4px 0 4px 12px;
  font-size: 0.9375rem;
  border-left: 4px solid var(--ochre);
}

/* privacy page: one column of short paragraphs */
.privacy ul { padding-left: 1.25rem; }
.privacy li { margin: 0 0 6px; }

/* already sent, link unavailable, busy, error: one card, one sentence, one action */
.state-card { max-width: 36rem; margin: var(--s4) auto; }
.state-card h1 { margin-top: var(--s2); }
.sent-list { padding-left: 1.25rem; }

/* admin */
pre.error-detail { max-width: 40rem; margin: 0; font-size: 0.85em; white-space: pre-wrap; }
.admin fieldset label:not(.check) { margin-top: var(--s2); }
.admin .back { margin: 0 0 var(--s1); }
.admin section.card { margin: var(--s3) 0; }
.admin section.card > h2 { margin-top: 0; }
.admin-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; justify-content: space-between; }
.admin-head .btn { width: 100%; }
.admin-head .muted { margin: 0; }
.stats { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.stat { display: block; margin: 0; }
.stat p, .stat span { display: block; margin: 0; }
.stat-label { font-size: 0.875rem; color: var(--sub); }
.stat-number { font: 2.5rem/1.15 var(--serif); color: var(--green); }
a.stat-link { color: inherit; text-decoration: none; }
a.stat-link .hint { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.rows { padding: 0; margin: 0 0 var(--s2); list-style: none; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.rows > .row { max-width: none; }
.row-main { flex: 1 1 14rem; min-width: 0; }
.row-main > * { display: block; margin: 0; }
.row-main .state { display: flex; }
.row-title { font-weight: 600; overflow-wrap: anywhere; }
a.row-title { display: inline-block; min-height: var(--target); padding: 10px 0; margin: -10px 0 -6px; }
.row-action { flex: none; }
.row-action form { margin: 0; }
.error-line { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; }
.field-row { display: grid; gap: 0 var(--s2); }
.btn-wide { width: 100%; }
.copy-card .copy { margin: 0 0 var(--s1); }
textarea.copy { min-height: 14rem; line-height: 1.45; font-family: inherit; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s2); margin: 0 0 var(--s2); }
.facts div { min-width: 0; }
.facts dt { font-size: 0.875rem; color: var(--sub); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.quality-notes { margin: var(--s1) 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.work-body .actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.work-body details { margin-top: var(--s1); }
.actions-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.actions-row > * { flex: 1 1 12rem; }
.danger-link { color: var(--danger); border-color: var(--danger); }
@media (min-width: 40rem) {
  .admin-head .btn, .btn-wide { width: auto; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .actions-row > * { flex: none; }
}