/* Redaktionsseite. Erbt die Farbtoken aus style.css, sonst nichts gemeinsam:
   das hier ist ein Schreibtischwerkzeug, keine Handy-App — breite Zeilen, viel
   Text auf einmal, Tastatur vor Daumen. */

body.edit {
  display:grid; grid-template-rows:auto auto 1fr auto; height:100vh;
  overflow:hidden;
}

/* header/footer aus style.css sind die 600-px-Handyspalte; hier volle Breite */
.ehead, .ebar { max-width:none; margin:0; }

.ehead {
  display:flex; align-items:baseline; gap:12px; padding:12px 20px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.ehead h1 { margin:0; font-size:15px; font-weight:650; }
.ehead .sub { color:var(--dim); font-size:12.5px; }
.grow { flex:1; }
.back { color:var(--accent); text-decoration:none; font-size:13px; }
.back:hover { text-decoration:underline; }

.etop {
  display:flex; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.etop video {
  width:264px; aspect-ratio:16/9; background:#000; border-radius:10px;
  flex:none; display:block;
}
.etools { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.etools .days { padding:0; flex-wrap:wrap; overflow:visible; }
.filters { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.filters .pill.on { background:var(--accent); border-color:var(--accent);
                    color:var(--accent-fg); font-weight:600; }
#q { flex:1; min-width:140px; background:var(--sunk); border:1px solid var(--line);
     border-radius:999px; padding:8px 14px; min-height:38px; }

/* `main` in style.css ist die Handy-Spalte der App: 600px, zentriert. Hier ist
   `main` die Korrekturliste und soll die Breite des Schreibtischs nutzen. */
.rows { max-width:1100px; margin:0; padding:8px 20px 24px; overflow-y:auto; }
.row2 {
  display:grid; grid-template-columns:34px 40px 1fr; gap:10px;
  align-items:start; padding:9px 8px; border-bottom:1px solid var(--line);
  border-radius:8px;
}
.row2:target, .row2.playing { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.row2 .n { color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums;
           padding-top:9px; text-align:right; }
.row2 .play {
  width:34px; height:34px; margin-top:2px; border-radius:50%; border:0;
  background:var(--sunk); color:var(--fg); display:grid; place-items:center;
}
.row2 .play:hover { background:var(--line); }
.row2 textarea {
  /* `font:inherit` fehlt in style.css für textarea — sonst Monospace */
  font:inherit; color:inherit;
  width:100%; resize:none; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  font-size:15px; line-height:1.45; min-height:40px;
}
.row2 textarea:focus { outline:2px solid var(--accent); outline-offset:-1px;
                       border-color:transparent; }
.row2.dirty textarea { border-color:var(--accent2, var(--accent)); }
.row2.corrected textarea { background:color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.meta2 { grid-column:3; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
         margin-top:5px; font-size:11.5px; color:var(--dim); }
.meta2 .was { color:var(--dim); font-style:italic; }
.tag {
  padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600;
  background:var(--sunk); color:var(--dim);
}
.tag.warn { background:color-mix(in srgb, var(--rec) 16%, transparent); color:var(--rec); }
.tag.ok { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); }
.meta2 button { background:none; border:0; color:var(--accent); font-size:11.5px;
                padding:0; text-decoration:underline; }

.dayline { margin:22px 0 6px; padding:0 8px; font-size:12px; font-weight:650;
           color:var(--dim); text-transform:uppercase; letter-spacing:.07em; }
.dayline:first-child { margin-top:6px; }

.ebar {
  display:flex; align-items:center; gap:10px; padding:12px 20px;
  border-top:1px solid var(--line); background:var(--surface);
}
.estate { font-size:13px; color:var(--dim); }
.estate.err { color:var(--rec); }
.estate.ok { color:var(--ok); }
.save {
  background:var(--accent); color:var(--accent-fg); border:0; border-radius:999px;
  padding:10px 20px; font-size:14px; font-weight:620; min-height:40px;
}
.save:disabled { opacity:.4; }

/* ---------- Anmeldung ---------- */

.login {
  max-width:380px; margin:48px auto; padding:24px;
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
/* Zwei Formulare in derselben Karte, eins davon `hidden`. Die Spalte muss
   deshalb am Formular hängen und nicht nur an der Karte. */
.login form { display:flex; flex-direction:column; gap:8px; }
.tabs { display:flex; gap:6px; margin-bottom:4px; }
.tab {
  flex:1; min-height:38px; border:0; border-radius:9px; background:var(--sunk);
  color:var(--dim); font-size:14px; font-weight:560;
}
.tab.on { background:color-mix(in srgb, var(--accent) 14%, var(--surface));
          color:var(--fg); box-shadow:inset 0 0 0 1px var(--accent); }
.login label { font-size:12.5px; font-weight:650; color:var(--dim); margin-top:6px;
               display:flex; align-items:baseline; gap:8px; }
.login label em { font-style:normal; font-weight:400; font-size:11.5px; }
.login input {
  background:var(--sunk); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; min-height:44px; width:100%;
}
.login input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.login .save { margin-top:16px; }
.loginhint { margin:0 0 4px; font-size:13px; color:var(--dim); line-height:1.45; }
.loginmsg { margin:10px 0 0; min-height:1.2em; font-size:13px; color:var(--dim); }
.loginmsg.err { color:var(--rec); }
.loginmsg.ok { color:var(--ok); }

.ehead .who { color:var(--dim); font-size:12.5px; }
.ehead .who button {
  background:none; border:0; color:var(--accent); font-size:12.5px; padding:0 0 0 8px;
}
.ehead .who button:hover { text-decoration:underline; }

@media (max-width:760px) {
  .login { margin:24px 12px; }
  .etop { flex-direction:column; }
  .etop video { width:100%; }
  .rows { padding:8px 12px 24px; }
  .row2 { grid-template-columns:28px 36px 1fr; }
}