/* 6i Signature — brand v2.1 */

:root{
  --ink:#1b1b1f; --paper:#fbfaf6; --blue:#2f5d8a; --green:#3f7a52; --orange:#d97a2b;
  --rose:#9e6b7a; --violet:#7a5c93; --crimson:#a4243b;
  --move-unitizing:var(--blue); --move-mult:var(--green); --move-relational:var(--orange);
  --move-spatial:var(--rose); --move-stats:var(--violet); --move-nonmove:#6b6b6b;
  --paper-dim:#f2efe6; --line:#e6e2d6; --go:#2f8f4e;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family:"Lexend",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper);
  font-weight:400;
}

h1,h2,h3{
  font-family:"Source Serif 4",Georgia,serif;
  color:var(--ink);
  margin:0 0 0.4em 0;
}

a{ color:var(--blue); }

/* ---------- layout shell ---------- */

.app-header{
  display:flex; align-items:center; gap:0.75rem;
  padding:1rem 1.5rem;
  border-bottom:2px solid var(--ink);
  background:var(--paper);
}

.app-header .mark{
  width:2.25rem; height:2.25rem;
  display:flex; align-items:center; justify-content:center;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:700; font-size:1.3rem;
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:0.35rem;
}
.app-header .mark .dot{ color:var(--orange); }

.app-header h1{ font-size:1.25rem; margin:0; }
.app-header .subtitle{ font-size:0.85rem; color:#4b4b52; margin-left:0.25rem; }

.app-header .status{
  margin-left:auto;
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.8rem; color:var(--ink);
}
.app-header .go-dot{
  width:0.55rem; height:0.55rem; border-radius:50%;
  background:var(--go);
  display:inline-block;
}

.app-header .header-account{
  display:flex; align-items:center; gap:0.75rem;
  font-size:0.85rem;
}
.app-header .header-account #auth-email-display{ font-weight:600; color:var(--ink); }
.app-header .status + .header-account{ margin-left:1rem; }

main{
  max-width:72rem;
  margin:0 auto;
  padding:1.5rem;
  display:flex; flex-direction:column; gap:1.5rem;
}

main.view{ display:none; }
main.view:not([hidden]){ display:flex; }

/* ---------- landing ---------- */

.view-landing{
  max-width:40rem;
  min-height:calc(100vh - 6rem);
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
}
.view-landing .hero{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:2rem 1rem;
}
.hero-mark{
  width:3.5rem; height:3.5rem;
  display:flex; align-items:center; justify-content:center;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:700; font-size:2rem;
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:0.5rem;
}
.hero-mark .dot{ color:var(--orange); }
.hero-title{ font-size:2rem; margin:0.25rem 0 0; }
.hero-tagline{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.2rem; color:var(--ink); margin:0;
}
.hero-copy{
  color:#3a3a40; font-size:0.95rem; line-height:1.6;
  max-width:32rem; margin:0.5rem 0 0;
}
.hero-copy p{ margin:0 0 0.6rem; }
.hero-audience{
  font-size:0.85rem; font-weight:600; color:#4b4b52; margin:0.25rem 0 0;
}
.hero-actions{ justify-content:center; margin-top:1.25rem; }
.hero-actions button{ padding:0.75rem 2rem; font-size:1rem; }

.view-footer{
  margin-top:2.5rem;
  font-size:0.78rem; color:#6b6b6b;
  text-align:center;
}

/* ---------- login ---------- */

.view-login{
  max-width:26rem;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 6rem);
}
.login-card{ width:100%; }
.login-card .actions{ margin-top:0.25rem; }
.invite-note{
  font-size:0.82rem; color:#4b4b52;
  background:var(--paper-dim); border:1px solid var(--line); border-radius:0.4rem;
  padding:0.55rem 0.75rem; margin:0.75rem 0 0;
}
.pw-wrap{ position:relative; display:flex; align-items:center; }
.pw-wrap input{ flex:1; padding-right:4rem; }
.pw-reveal{
  position:absolute; right:0.3rem;
  background:transparent; border:none; color:var(--blue);
  font-size:0.8rem; font-weight:600; padding:0.3rem 0.5rem; cursor:pointer;
}
.pw-reveal:hover{ background:transparent; text-decoration:underline; }

.back-link{
  display:inline-block; margin-top:1.1rem;
  font-size:0.85rem; color:var(--ink); text-decoration:none;
}
.back-link:hover{ text-decoration:underline; }

/* ---------- input card ---------- */

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:0.6rem;
  padding:1.25rem 1.5rem;
  box-shadow:0 1px 2px rgba(27,27,31,0.06);
}

.field{ display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.9rem; }
.field label{ font-size:0.8rem; font-weight:600; color:#3a3a40; }
.field-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.field-row .field{ flex:1; min-width:10rem; }

input[type=text], input[type=search], textarea, select{
  font-family:inherit; font-size:0.95rem; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:0.4rem;
  padding:0.5rem 0.65rem;
  width:100%;
}
input[type=text]:focus, textarea:focus, select:focus{
  outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);
}
textarea{ min-height:4.5rem; resize:vertical; }

.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:0.75rem; }
.choice-field{
  display:flex; align-items:center; gap:0.5rem;
  border:1px solid var(--line); border-radius:0.4rem;
  padding:0.4rem 0.6rem; background:var(--paper);
}
.choice-field .choice-letter{
  font-family:"Source Serif 4",Georgia,serif; font-weight:700;
  color:var(--ink); width:1.4rem; text-align:center;
}
.choice-field input.choice{ border:none; background:transparent; padding:0.25rem 0; }
.choice-field input.choice:focus{ outline:none; }
.choice-field input[type=radio]{ accent-color:var(--green); width:1rem; height:1rem; }
.choice-field label.correct-label{ font-size:0.7rem; color:#4b4b52; white-space:nowrap; }

/* ---------- drop zone ---------- */

#drop{
  border:2px dashed var(--line);
  border-radius:0.5rem;
  padding:1.5rem;
  min-height:18rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem;
  text-align:center;
  color:#5a5a60;
  font-size:0.95rem;
  cursor:pointer;
  background:var(--paper-dim);
  transition:border-color 0.15s ease, background 0.15s ease;
}
#drop img.thumb{ max-height:11rem; }

/* scan progress — indeterminate green bar (green = go; never red/orange) */
.scan-progress{
  margin-top:0.75rem;
  height:0.45rem; width:100%;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:0.3rem;
  overflow:hidden;
}
.scan-progress .bar{
  height:100%; width:35%;
  background:var(--go);
  border-radius:0.3rem;
  animation:scan-slide 1.1s ease-in-out infinite;
}
@keyframes scan-slide{
  0%{ margin-left:-35%; }
  100%{ margin-left:100%; }
}
#drop.dragover{
  border-color:var(--blue);
  background:#eef3f8;
  color:var(--ink);
}
#drop img.thumb{
  max-width:100%; max-height:8rem; border-radius:0.35rem; margin-top:0.5rem;
  border:1px solid var(--line);
}

/* ---------- buttons ---------- */

.actions{ display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }

button{
  font-family:"Lexend",sans-serif; font-weight:600; font-size:0.9rem;
  border-radius:0.4rem; padding:0.6rem 1.1rem;
  border:1px solid var(--blue);
  background:var(--blue); color:#fff;
  cursor:pointer;
}
button:hover{ background:#26496f; border-color:#26496f; }
button:disabled{ opacity:0.5; cursor:not-allowed; }

button.secondary{
  background:var(--paper); color:var(--blue); border:1px solid var(--blue);
}
button.secondary:hover{ background:#eef3f8; }

/* Stop control — deliberately dark/ink so it stands apart from the blue actions */
button.stop-btn{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
button.stop-btn:hover{ background:#000; }

button.ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line);
  font-weight:500;
}
button.ghost:hover{ background:var(--paper-dim); }

/* orange accents — a leading bar on every app section heading (decorative, not a status) */
#view-app h2{ position:relative; padding-left:0.7rem; }
#view-app h2::before{
  content:""; position:absolute; left:0; top:0.12em; bottom:0.12em;
  width:0.28rem; border-radius:2px; background:var(--orange);
}
/* orange accent on the item-image drop label, echoing the mark's orange i */
#drop{ border-color:var(--orange); }
#drop.dragover{ border-color:var(--blue); }

/* stacked "both errors" traps on a compound distractor */
.sig-add{ color:#4b4b52; font-size:0.85rem; margin-top:0.1rem; }
.sig-add .applies{ color:#8a8a90; font-style:italic; }

/* per-card "Report" flag — quiet text button, never alarm-colored */
.report-btn{
  margin-top:0.6rem;
  background:transparent; color:#6b6b6b; border:1px solid var(--line);
  font-size:0.72rem; font-weight:500; padding:0.25rem 0.6rem;
}
.report-btn:hover{ background:var(--paper-dim); color:var(--ink); }

/* scanning state = ink weight, never red/orange */
button.scanning{
  background:#000;
  position:relative;
}

/* ---------- account / auth ---------- */

.auth-card{ padding-bottom:1rem; }
.auth-note{
  font-size:0.85rem; color:#4b4b52; background:var(--paper-dim);
  border:1px solid var(--line); border-radius:0.4rem;
  padding:0.5rem 0.75rem; margin:0 0 0.75rem;
}
.auth-row{ display:flex; flex-direction:column; gap:0.6rem; }
.auth-row .actions{ margin-top:0.2rem; }
#auth-signed-in{ flex-direction:row; align-items:center; gap:1rem; }
#auth-email-display{ font-size:0.9rem; color:var(--ink); font-weight:600; }
.auth-error{
  font-size:0.82rem; color:var(--ink); font-weight:600;
  border-left:0.3rem solid var(--rose);
  background:var(--paper-dim);
  border-radius:0.25rem;
  padding:0.4rem 0.65rem;
  margin:0.2rem 0 0;
}

/* ---------- batch ---------- */

.batch-card{ padding-bottom:1.1rem; }
.batch-card .muted-note{ margin:0 0 0.9rem; }

.batch-controls{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end;
  margin-top:0.9rem;
}
.batch-controls .field{ margin-bottom:0; flex:1; min-width:14rem; }
.batch-controls .actions{ margin-bottom:0; }

.queue-list{
  list-style:none; margin:0.75rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:0.5rem;
}
.queue-empty{ font-size:0.85rem; color:#6b6b6b; }
.queue-item{
  border:1px solid var(--line); border-radius:0.4rem;
  background:var(--paper); padding:0.55rem 0.8rem;
}
.queue-row{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; font-size:0.85rem; }
.queue-index{ font-family:"Source Serif 4",Georgia,serif; font-weight:700; color:var(--ink); }
.queue-stem{ flex:1; min-width:10rem; color:var(--ink); }
.queue-meta{ font-size:0.72rem; color:#6b6b6b; }

.badge.queue-img{ border-color:var(--blue); color:var(--blue); background:#eaf1f7; }
.badge.status-pending{ margin-left:auto; }
.badge.status-scanning{ margin-left:auto; background:#000; color:#fff; border-color:#000; }
.badge.status-done{ margin-left:auto; border-color:var(--go); color:var(--go); background:#eaf6ee; }
.badge.status-error{ margin-left:auto; border-color:var(--rose); color:var(--rose); background:#f8eef1; }

.queue-remove{ padding:0.25rem 0.6rem; font-size:0.75rem; }
.queue-result{ margin-top:0.35rem; font-size:0.78rem; color:#3a3a40; }
.queue-result-line.queue-error{ color:var(--rose); font-weight:600; }

/* ---------- history ---------- */

.muted-note{ font-size:0.85rem; color:#6b6b6b; }
.history-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0.5rem;
}
.history-item{ margin:0; }
.history-entry{
  width:100%; text-align:left;
  display:flex; flex-direction:column; gap:0.2rem;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:0.4rem;
  padding:0.55rem 0.8rem;
  font-weight:400;
  cursor:pointer;
}
.history-entry:hover{ background:var(--paper-dim); border-color:var(--blue); }
.history-entry .history-label{
  font-family:"Source Serif 4",Georgia,serif; font-size:0.92rem; color:var(--ink);
}
.history-entry .history-meta{ font-size:0.72rem; color:#6b6b6b; }

/* ---------- panels ---------- */

.panel{ display:flex; flex-direction:column; gap:0.75rem; }
.panel h2{ font-size:1.05rem; display:flex; align-items:center; gap:0.5rem; }
.panel-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem;
}

/* ---------- Panel A: error cards ---------- */

.error-card{
  border:1px solid var(--line);
  border-left:0.35rem solid var(--move-nonmove);
  border-radius:0.5rem;
  background:#fff;
  padding:0.85rem 1rem;
  display:flex; flex-direction:column; gap:0.4rem;
  font-size:0.85rem;
}

.error-card.move-unitizing{ border-left-color:var(--move-unitizing); }
.error-card.move-mult{ border-left-color:var(--move-mult); }
.error-card.move-relational{ border-left-color:var(--move-relational); }
.error-card.move-spatial{ border-left-color:var(--move-spatial); }
.error-card.move-stats{ border-left-color:var(--move-stats); }
.error-card.move-nonmove{ border-left-color:var(--move-nonmove); }

.error-card .choice-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem;
  font-size:0.95rem;
}
.error-card .choice-head strong{ font-family:"Source Serif 4",Georgia,serif; }

.badge{
  display:inline-block; font-size:0.65rem; font-weight:700; letter-spacing:0.02em;
  text-transform:uppercase;
  padding:0.15rem 0.45rem; border-radius:999px;
  border:1px solid var(--line); color:var(--ink); background:var(--paper-dim);
}
.badge.probe{ border-color:var(--violet); color:var(--violet); background:#f4effA; }
.badge.k2{ border-color:var(--blue); color:var(--blue); background:#eaf1f7; }
.badge.src{ border-color:var(--ink); color:var(--ink); background:#fff; margin-left:auto; }

.move{
  display:inline-block; align-self:flex-start;
  font-size:0.72rem; font-weight:700;
  padding:0.2rem 0.55rem; border-radius:0.3rem;
  color:#fff;
}
.move.move-unitizing{ background:var(--move-unitizing); }
.move.move-mult{ background:var(--move-mult); }
.move.move-relational{ background:var(--move-relational); }
.move.move-spatial{ background:var(--move-spatial); }
.move.move-stats{ background:var(--move-stats); }
.move.move-nonmove{ background:var(--move-nonmove); }

.error-card .sig{ font-family:"Source Serif 4",Georgia,serif; font-size:0.85rem; color:var(--ink); }
.error-card .fc{ font-size:0.75rem; font-weight:600; color:#4b4b52; }
.error-card .how{ font-size:0.8rem; color:#3a3a40; line-height:1.4; }

.error-card .muted{
  color:#5a5a60; font-size:0.85rem; line-height:1.4;
}
.error-card.is-muted{ border-left-color:var(--line); background:var(--paper-dim); }

/* ---------- Panel B: student work (Kalam ONLY here) ---------- */

.student-work{
  font-family:"Kalam",cursive;
  background:#fffef8;
  border:1px solid #e6e2d6;
  border-radius:0.5rem;
  padding:0.9rem 1.1rem;
  color:var(--ink);
}
.student-work .sw-head{
  font-family:"Kalam",cursive;
  font-weight:700; font-size:1.05rem; margin-bottom:0.35rem;
}
.student-work pre{
  font-family:"Kalam",cursive;
  font-size:1.05rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
  margin:0; color:var(--ink);
}

/* ---------- Panel C: canonical strategies ---------- */

#panel-c{
  background:#fff; border:1px solid var(--line); border-radius:0.5rem;
  padding:1rem 1.25rem;
}
#panel-c h3{ font-size:1rem; }
#panel-c h4{ font-family:"Source Serif 4",Georgia,serif; font-size:0.9rem; margin:0.9rem 0 0.3rem; }
#panel-c ol, #panel-c ul{ margin:0.25rem 0 0; padding-left:1.3rem; font-size:0.88rem; line-height:1.5; }
#panel-c li{ margin-bottom:0.3rem; }

/* ---------- footer / export actions ---------- */

.export-actions{ display:flex; gap:0.6rem; justify-content:flex-end; }

/* ---------- print ---------- */

@media print{
  /* hide the input form entirely — it's the only section.card on the page */
  .card{ display:none !important; }
  /* hide the toolbar/buttons and Panel C (canonical strategies has its own .html export) */
  .app-header .status, .actions, #drop, .export-actions{ display:none !important; }
  section:has(#panel-c-heading){ display:none !important; }

  body{ background:#fff; }
  .error-card, .student-work{
    box-shadow:none; border:1px solid #999;
    break-inside:avoid; page-break-inside:avoid;
  }
  .panel{ break-inside:avoid; }
  main{ max-width:100%; padding:0; }
  a{ color:var(--ink); text-decoration:none; }

  /* Kalam is loaded via the Google Fonts <link> in <head>; keep it on Panel B in print */
  .student-work, .student-work *{ font-family:"Kalam",cursive !important; }
}

/* ---------- responsive ---------- */

@media (max-width:560px){
  main{ padding:1rem; }
  .app-header{ padding:0.75rem 1rem; }
}