/*
  styles.css

  This file controls the LOOK of the page:
  - colours
  - spacing (padding/margins)
  - layout (grid)
  - fonts
  - button styles
  - code display

  TIP for students:
  - If you change a colour in :root, it updates everywhere that variable is used.
*/

:root{
  /* "CSS variables" (also called custom properties) */
  --eq-blue: #003262;      /* main brand blue */
  --eq-teal: #00A1BF;      /* accent teal */
  --bg: #F4F5F7;           /* page background */
  --card: #FFFFFF;         /* card background */
  --text: #1F2937;         /* main text colour */
  --muted: #6B7280;        /* lighter text colour */
  --border: #E5E7EB;       /* light border colour */

  /* status colours */
  --danger: #B91C1C;
  --ok: #065F46;

  /* visual styling */
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --radius: 14px;

  /* font stacks */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Make sizing predictable: padding and border included in width/height calculations */
*{ box-sizing: border-box; }

/* Page-level styling */
body{
  margin:0;
  font-family: var(--sans);

  /*
    Background uses a subtle gradient to make the header area feel distinct.
    It fades to the plain background colour.
  */
  background: linear-gradient(180deg, rgba(0,50,98,0.06), transparent 240px), var(--bg);
  color: var(--text);
}

/* Header container: centres content with a max width */
header{
  padding: 28px 18px 10px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Brand row: dot + title */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Decorative dot on the left of the title */
.dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--eq-teal);

  /* creates a soft ring around the dot */
  box-shadow: 0 0 0 6px rgba(0,161,191,0.18);
}

/* Main title */
h1{
  margin:0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

/* Subtitle text */
.sub{
  margin:8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Main container */
main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 18px 30px;
}

/* Card layout (white panel with border and shadow) */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden; /* keeps rounded corners clean */
}

/* Card header area (title + small chip on right) */
.card-h{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
}

.card-h strong{
  font-size: 14px;
}

/* Small pill label in the top-right of cards */
.chip{
  font-size: 12px;
  color: var(--eq-blue);
  background: rgba(0,50,98,0.08);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,50,98,0.14);
  white-space: nowrap;
}

/* Card content padding */
.content{
  padding: 14px 16px 16px;
}

/* Textarea where students paste code */
textarea{
  width:100%;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  background: #FBFBFC;
  resize: vertical; /* user can drag to resize taller */
  outline: none;
}

/* Focus effect (when you click into the textarea) */
textarea:focus{
  border-color: rgba(0,161,191,0.65);
  box-shadow: 0 0 0 4px rgba(0,161,191,0.16);
}

/* Button row container */
.actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap; /* wraps on smaller screens */
  margin-top: 12px;
  align-items:center;
}

/* Base button style */
button{
  appearance:none;
  border: 1px solid rgba(0,50,98,0.15);
  background: var(--eq-blue);
  color: white;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  cursor:pointer;
}

/* Secondary button style (white background) */
button.secondary{
  background: white;
  color: var(--eq-blue);
}

/* Disabled buttons look faded and are not clickable */
button:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

/* Small helper text */
.hint{
  color: var(--muted);
  font-size: 12px;
}

/* Output code block */
pre{
  margin:0;
  white-space: pre-wrap; /* wraps long lines */
  word-wrap: break-word; /* breaks long words if needed */
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;

  /* Dark code background */
  background: #0B1220;
  color: #E5E7EB;

  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  min-height: 260px;
}

/* Status message box (used for done/errors) */
.status{
  margin-top: 10px;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #F9FAFB;
}

/* Green "ok" message */
.status.ok{
  border-color: rgba(6,95,70,0.25);
  background: rgba(6,95,70,0.06);
  color: var(--ok);
}

/* Red "error" message */
.status.err{
  border-color: rgba(185,28,28,0.25);
  background: rgba(185,28,28,0.06);
  color: var(--danger);
}

/*
  Grid layout:
  - On small screens: 1 column (stacked)
  - On large screens: 2 columns (side-by-side)
*/
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 980px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

/* Footer text */
.footer{
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* Unlock screen form styles */
.unlock-form .label{
  display:block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 600;
}

.unlock-form .text{
  width:100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #FBFBFC;
}

.unlock-form .text:focus{
  border-color: rgba(0,161,191,0.65);
  box-shadow: 0 0 0 4px rgba(0,161,191,0.16);
}