/* Zlado Class Studio — review portal.
   Phone-first: Manzoor reviews between other work, often not at a desk. */

:root {
  --azure:   #0087BC;
  --azure-d: #006894;
  --teal:    #123c47;
  --ink:     #17242a;
  --muted:   #64757d;
  --line:    #dfe6ea;
  --bg:      #f4f7f9;
  --card:    #ffffff;
  --warn:    #b4541a;
  --warn-bg: #fff4e8;
  --ok:      #1d7a4c;
  --ok-bg:   #e9f7ef;
  --gate:    #8b3a3a;
  --radius:  10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--azure-d); }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--teal), #0a2830);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .01em; }
.brand-mark {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--azure); font-size: 11px;
}
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar nav a { color: #cfe6ef; text-decoration: none; font-size: 14px; }
.topbar nav a:hover { color: #fff; }
.topbar .who { color: #a9d8e0; font-size: 13px; }

/* Full width — Manzoor's call: fit the window, no gaps at the sides. The
   review page is two columns of dense content, so the extra width goes
   straight into the still and the narration rather than into margins. */
main { max-width: none; margin: 0; padding: 20px 22px 80px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
.sub { color: var(--muted); margin: 0 0 18px; }

/* ---- flash ---- */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.flash-ok   { background: var(--ok-bg);  color: var(--ok);   border: 1px solid #bde5cd; }
.flash-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #f2d3b4; }

/* ---- cards / class list ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.classrow { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; color: inherit; }
.classrow:hover { border-color: var(--azure); }
.classrow .thumb {
  width: 168px; flex: none; aspect-ratio: 16/9;
  background: #e9eef1; border-radius: 6px; object-fit: cover;
}
.classrow .body { flex: 1; min-width: 0; }
.classrow h3 { margin: 0 0 4px; font-size: 16px; }
.meta { color: var(--muted); font-size: 13px; }
.meta b { color: var(--ink); font-weight: 600; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: #e7eef2; color: #3d5560; font-size: 12px; font-weight: 600;
}
.pill-gate { background: #f6e9e9; color: var(--gate); }
.pill-done { background: var(--ok-bg); color: var(--ok); }
.pill-open { background: var(--warn-bg); color: var(--warn); }

/* ---- the combined review ---- */
.gatebar {
  position: sticky; top: 48px; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 18px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.gatebar .spacer { margin-left: auto; }
.tab {
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--muted); background: #eef3f6;
}
.tab.on { background: var(--azure); color: #fff; }

.slide {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
}
.slide.marked-ok     { border-color: #a9dcc0; }
.slide.marked-change { border-color: #eec49b; }

.slide-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafcfd;
  flex-wrap: wrap;
}
.slide-head .n { font-weight: 700; color: var(--muted); font-size: 13px; }
.slide-head h3 { margin: 0; font-size: 15px; flex: 1; min-width: 140px; }

.slide-body { display: flex; gap: 18px; padding: 14px; align-items: flex-start; }
/* Sticky, because that is the whole point: slide 3 of class 07 carries 14
   narration lines, and a still that scrolls away while you read them puts you
   back to reviewing the two halves separately. */
.slide-still { flex: 0 0 46%; position: sticky; top: 112px; }
.slide-still img {
  width: 100%; border-radius: 6px; border: 1px solid var(--line);
  background: #0a2830; display: block; cursor: zoom-in;
}
.slide-still .missing {
  aspect-ratio: 16/9; display: grid; place-items: center;
  background: #eef3f6; border: 1px dashed var(--line); border-radius: 6px;
  color: var(--muted); font-size: 13px;
}
.narration { flex: 1; min-width: 0; }

.seg {
  padding: 8px 10px; border-left: 3px solid var(--line);
  margin-bottom: 8px; border-radius: 0 6px 6px 0; background: #fbfcfd;
}
.seg:hover { border-left-color: var(--azure); }
.seg .beat {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--azure-d); font-weight: 700; margin-bottom: 2px;
}
.seg p { margin: 0; }
.seg .segtools { margin-top: 4px; }
.seg.has-comment { border-left-color: var(--warn); background: var(--warn-bg); }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--azure-d); font-size: 12px; font-weight: 600;
}
.linkbtn:hover { text-decoration: underline; }

.comment {
  background: var(--warn-bg); border: 1px solid #f2d3b4; border-radius: 6px;
  padding: 8px 10px; margin: 6px 0; font-size: 14px;
}
.comment.done { background: var(--ok-bg); border-color: #bde5cd; }
.comment .who { color: var(--muted); font-size: 12px; }

textarea, input[type=text], input[type=email], input[type=password], select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 64px; resize: vertical; }

.btn {
  display: inline-block; padding: 8px 16px; border-radius: 6px; border: 0;
  background: var(--azure); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--azure-d); }
.btn.ghost { background: #eef3f6; color: var(--ink); }
.btn.danger { background: #b4322a; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.mark-btns { display: flex; gap: 6px; }
.mark-btns button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 4px 11px; font-size: 13px; cursor: pointer; font-weight: 600; color: var(--muted);
}
.mark-btns button.on-ok     { background: var(--ok-bg);   border-color: #bde5cd; color: var(--ok); }
.mark-btns button.on-change { background: var(--warn-bg); border-color: #f2d3b4; color: var(--warn); }

/* ---- [CHECK] questions ---- */
.check {
  border: 1px solid #f2d3b4; background: var(--warn-bg);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.check.answered { background: var(--ok-bg); border-color: #bde5cd; }
.check .q { font-weight: 600; margin: 0 0 6px; }

/* ---- lightbox ---- */
.lb {
  position: fixed; inset: 0; background: rgba(8,20,25,.92);
  display: none; place-items: center; z-index: 100; padding: 20px;
}
.lb.open { display: grid; }
.lb img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* ---- login ---- */
.login-wrap { max-width: 360px; margin: 60px auto; }
.login-wrap label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 600; }

table.grid { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
table.grid th, table.grid td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
table.grid th { background: #fafcfd; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ---- phone ---- */
@media (max-width: 760px) {
  .slide-body { flex-direction: column; }
  .slide-still { flex: none; width: 100%; position: static; }
  .classrow { flex-direction: column; }
  .classrow .thumb { width: 100%; }
  .gatebar { top: 0; position: static; }
  main { padding: 14px 12px 60px; }
}

/* ---- courses ---- */
.course-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.course-head h2 { margin: 0; font-size: 18px; }
.course-head .mini { color: var(--muted); font-size: 13px; }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 6px;
  background: #eaf3f7; color: var(--azure-d);
  font-size: 12px; font-weight: 600; margin-right: 5px;
}
.chip-src      { background: #ece7f6; color: #5b4a8a; }
.chip-src-own  { background: #fdf0e3; color: #8a5a1e; }
.chip-src-lec  { background: #e6f4ec; color: #1d7a4c; }

.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---- editing a narration line ---- */
.seg.edited { border-left-color: var(--azure); background: #eef6fa; }
.seg .was {
  margin-top: 6px; padding: 6px 8px; border-radius: 4px;
  background: #f2f4f5; color: var(--muted); font-size: 13px;
}
.seg .was b { color: var(--ink); font-weight: 600; }
.seg-edit textarea { margin-top: 4px; }
.editmark {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--azure-d);
}