/* =============================================
   CULLEN ENGLISH — SHARED STYLES
   Universal design system used by all pages.
   ============================================= */

/* --- DESIGN TOKENS --- */
:root {
  --parchment: #f5f0e8;
  --parchment-dark: #e8e0d0;
  --ink: #2c2416;
  --ink-light: #5a4d3a;
  --accent: #8b3a3a;
  --gold: #b8963e;
  --gold-light: #d4b35e;
  --annotation-bg: #3a2f1f;
  --annotation-text: #f0ead8;
  --correct: #4a7c4a;
  --correct-light: #e8f3e8;
  --incorrect: #8b3a3a;
  --incorrect-light: #f5e8e8;
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: var(--parchment);
  color: var(--ink);
  font-family: 'Source Sans Pro', 'Segoe UI', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* --- HEADER --- */
header {
  background: linear-gradient(135deg, #2c2416 0%, #3a2f1f 50%, #2c2416 100%);
  color: var(--parchment);
  padding: 1.6rem 2.5rem;
  border-bottom: 3px solid var(--gold);
}
header h1 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 2rem;
  font-weight: 700;
}
header h1 span { color: var(--gold-light); }

/* --- LOGIN SCREEN --- */
.login-screen {
  max-width: 480px;
  margin: 4rem auto;
  background: white;
  border: 1px solid #d9d0c0;
  border-radius: 8px;
  padding: 2.5rem 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  text-align: center;
}
.login-screen h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.login-screen p {
  font-size: 0.9rem;
  color: var(--ink-light);
  margin-bottom: 1.5rem;
}
.login-screen input[type="text"] {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1.1rem;
  font-family: 'Source Sans Pro', sans-serif;
  border: 2px solid #d9d0c0;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}
.login-screen input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
}
.login-btn {
  background: var(--gold);
  color: white;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.login-btn:hover { background: var(--gold-light); }
.login-error {
  color: var(--incorrect);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.8rem;
  display: none;
}
.login-already {
  background: var(--correct-light);
  border: 1px solid var(--correct);
  color: var(--correct);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  display: none;
}
.login-checking {
  color: var(--ink-light);
  font-size: 0.85rem;
  margin-top: 0.8rem;
  display: none;
}

/* --- SUBMIT AREA --- */
.submit-area {
  margin: 2rem 0;
  text-align: center;
}
.submit-btn {
  background: var(--gold);
  color: white;
  border: none;
  padding: 0.8rem 2.5rem;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.submit-btn:hover { background: var(--gold-light); }
.submit-btn:disabled { background: #b0a690; cursor: not-allowed; }
.submit-status {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.submit-status.success { color: var(--correct); }
.submit-status.error { color: var(--incorrect); }
.submit-status.warning { color: var(--gold); }

/* --- RESULTS BANNER --- */
.results-banner {
  background: var(--annotation-bg);
  color: var(--annotation-text);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  display: none;
}
.results-banner h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}
.results-banner p {
  font-size: 0.92rem;
  line-height: 1.5;
}

/* --- AUTOSAVE INDICATOR --- */
.autosave-indicator {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--annotation-bg);
  color: var(--gold-light);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 200;
  pointer-events: none;
}
.autosave-indicator.visible { opacity: 1; }

/* --- FEEDBACK MESSAGES --- */
.feedback-msg {
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  display: none;
}
.feedback-msg.correct { display: block; color: var(--correct); background: var(--correct-light); }
.feedback-msg.incorrect { display: block; color: var(--incorrect); background: var(--incorrect-light); }

/* --- HIDE ASSIGNMENT UNTIL LOGIN --- */
#assignment-content { display: none; }