/* videobook.club – Werkstatt, Über, legal pages, admin */

.toc-inline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: .97rem; }
.toc-inline a { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.toc-inline a:hover { color: var(--text); border-bottom-color: var(--gilt); }

.ws-section { margin-top: clamp(56px, 8vw, 96px); }
.ws-section.prose { max-width: var(--max); }
.ws-section.prose > * { max-width: 42rem; }
.ws-section > h2 { max-width: 40rem; }
.section-lede { max-width: 40rem; color: var(--text-soft); }

/* recipe: a real sequence, so numbered */
.recipe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 42px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.recipe li { position: relative; padding-top: 58px; counter-increment: step; }
.recipe li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gilt);
  font-variant-numeric: lining-nums;
}
.recipe li::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 44px;
  right: 0;
  height: 1px;
  background: var(--line);
}
.recipe h3 { font-size: 1.3rem; margin-bottom: .4em; }
.recipe p { margin: 0; color: var(--text-soft); font-size: .98rem; }
@media (max-width: 900px) { .recipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .recipe { grid-template-columns: 1fr; } }

/* skill card */
.skill {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px 48px;
  padding: clamp(24px, 4vw, 44px);
}
.skill h2 { font-size: var(--step-3); }
.skill__state { padding: 10px 14px; border-left: 3px solid var(--oxblood); background: rgba(125, 34, 41, .07); }
.skill__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.skill__install h3 { font-size: 1.2rem; margin-top: 4px; }
.skill__install dl { margin: 0; }
.skill__install dt { font-weight: 600; margin-top: 12px; }
.skill__install dd { margin: 2px 0 0; color: #3f392f; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; padding: 1px 5px; border-radius: 3px; background: rgba(232, 223, 200, .1); }
.paper code { background: rgba(36, 32, 26, .08); }
@media (max-width: 860px) { .skill { grid-template-columns: 1fr; } }

/* submission form */
.submit-form { display: grid; gap: 22px; margin-top: 26px; max-width: 980px; }
.sf-part { margin: 0; padding: 26px clamp(18px, 3vw, 34px) 12px; border: 0; min-width: 0; }
.sf-part legend {
  float: left;
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
}
.sf-part legend + * { clear: both; }
.sf-num {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 8px;
  border: 1px solid rgba(125, 34, 41, .55);
  border-radius: 50%;
  color: var(--oxblood);
  font-size: .7em;
  font-variant-numeric: lining-nums;
  vertical-align: .18em;
}
.grid-2, .grid-3 { display: grid; gap: 0 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.optional { font-weight: 400; color: var(--paper-muted); }
.hint-block { margin: 0 0 16px; color: #3f392f; max-width: 46rem; }
.check--inline { align-self: center; margin-top: 18px; }
.translation { margin-bottom: 4px; }

.pd-check { min-height: 1.5em; margin: -6px 0 12px; font-size: .95rem; }
.pd-check.is-ok { color: var(--ok); }
.pd-check.is-bad { color: var(--danger); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: rgba(36, 32, 26, .07); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: block; padding: 7px 16px; border-radius: 999px; color: var(--paper-muted); }
.segmented input:checked + span { background: var(--paper); color: var(--paper-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.segmented input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 1px; }

input[type="file"] { padding: 9px 10px; background: rgba(255, 252, 244, .5); }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(36, 32, 26, .3);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--paper-ink);
  font: inherit;
  cursor: pointer;
}

.m-result { margin: -4px 0 14px; }
.m-result ul { margin: 8px 0 0; padding-left: 1.2em; }
.m-result .ok { color: var(--ok); margin: 0; }
.m-result .bad { color: var(--danger); margin: 0; }
.m-result .warn { color: #7a5a1d; }

.pages-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.pages-table th { text-align: left; font-weight: 500; font-size: .9rem; color: var(--paper-muted); padding: 0 8px 6px 0; }
.pages-table td { padding: 4px 8px 4px 0; vertical-align: top; }
.pages-table td:first-child { width: 4.5em; font-variant-numeric: lining-nums; padding-top: 14px; }
.pages-table td:nth-child(2) { width: 8em; }
.pages-table td:last-child { width: 3em; }
.pages-table input { min-height: 40px; }
.pages-table .btn { min-height: 40px; padding: 4px 10px; }
.pages-table svg { width: 16px; height: 16px; }

.consents { margin-top: 6px; }
.sf-submit { display: grid; justify-items: start; gap: 14px; }
.sf-submit .btn--gilt { min-height: 50px; padding-inline: 26px; font-size: 1.05rem; }
#form-errors ul { margin: 6px 0 0; padding-left: 1.2em; }

.upload-progress { width: min(100%, 560px); }
.upload-progress__label { margin: 0 0 6px; }
.upload-progress__bar { height: 8px; border-radius: 99px; background: rgba(232, 223, 200, .14); overflow: hidden; }
.upload-progress__bar span { display: block; height: 100%; width: 0; background: var(--gilt-gradient); transition: width .3s; }
.upload-progress__hint { margin: 6px 0 0; font-size: var(--step--1); color: var(--text-muted); }

.status-card { margin-top: 22px; padding: 26px 30px; max-width: 760px; }
.status-card h3 { font-size: var(--step-2); }
.status-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0 0; }
.status-card dt { color: var(--paper-muted); }
.status-card dd { margin: 0; }
.status-card .copy-link { display: flex; gap: 8px; margin-top: 16px; }
.status-card .copy-link input { font-size: .85rem; }

.code-details { margin-top: 18px; }
.code-details summary { cursor: pointer; color: var(--gilt-bright); }
.code-details pre {
  overflow: auto;
  margin: 14px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(8, 12, 10, .6);
  font-size: .82rem;
  line-height: 1.55;
}
.code-details pre code { padding: 0; background: none; font-size: inherit; }
.fine { font-size: var(--step--1); color: var(--text-muted); }

/* Über */
.manifesto { max-width: 40rem; }
.manifesto p { font-size: 1.12rem; line-height: 1.7; }
.manifesto p:first-of-type::first-letter {
  float: left;
  margin: .06em .08em 0 0;
  font-family: var(--font-display);
  font-size: 4.1em;
  line-height: .82;
  color: var(--gilt);
}
.hand-note { display: flex; gap: 18px; align-items: flex-start; max-width: 40rem; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.hand-note__hands { display: flex; gap: 10px; align-items: flex-end; flex: none; }
.hand-note__hands .h1 { width: 46px; height: 29px; background: var(--gilt-gradient); -webkit-mask: url("/img/hand-right.svg") center / contain no-repeat; mask: url("/img/hand-right.svg") center / contain no-repeat; }
.hand-note__hands .h2 { width: 20px; height: 32px; background: var(--gilt-gradient); -webkit-mask: url("/img/hand-up.svg") center / contain no-repeat; mask: url("/img/hand-up.svg") center / contain no-repeat; }
.hand-note p { margin: 0; color: var(--text-soft); }

.legal .placeholder-note { margin: 18px 0 28px; }
.legal address { font-style: normal; }

/* Admin */
.admin-login { max-width: 460px; padding: 26px 28px; margin-top: 18px; }
.admin-tabs { display: flex; gap: 6px; margin: 22px 0 18px; }
.admin-list { display: grid; gap: 14px; }
.admin-item { padding: 18px 22px; }
.admin-item header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.admin-item h3 { margin: 0; font-size: 1.3rem; }
.admin-item .meta { color: var(--paper-muted); font-size: .9rem; }
.admin-item dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0; font-size: .95rem; }
.admin-item dt { color: var(--paper-muted); }
.admin-item dd { margin: 0; overflow-wrap: anywhere; }
.admin-item video { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; background: #000; margin: 8px 0; }
.admin-item .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.admin-item textarea { min-height: 70px; }
.badge { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .8rem; border: 1px solid currentColor; }
.badge--submitted { color: #7a5a1d; }
.badge--approved { color: var(--ok); }
.badge--rejected, .badge--spam, .badge--hidden { color: var(--danger); }
.badge--published, .badge--visible { color: #2f5d76; }
.badge--pending { color: #7a5a1d; }
.admin-empty { color: var(--text-muted); font-style: italic; }
.admin-item pre { max-height: 280px; overflow: auto; font-size: .78rem; background: rgba(36, 32, 26, .06); padding: 10px; border-radius: 3px; }
.admin-filter { max-width: 280px; }
.admin-filter select { background: rgba(10, 16, 13, .6); color: var(--text); border-color: var(--line-strong); }