/* ---------- THEME -------------------------------------------------- */
:root{
    --accent-500: #e2b714; /* Monkeytype Yellow for caret/highlights */
    --accent-600: #c09500; /* Darker Yellow for hover */
    --surface    : #323437; /* Background for elements like cards, inputs */
    --border     : #4a4c50; /* Borders */
    --bg         : #2c2e31; /* Main background - dark gray */
    --text       : #d1d0c5; /* Main text - light gray (Monkeytype's primary text) */
    --text-dim   : #646669; /* Dimmed text for correctly typed characters */
    --error-text : #ca4754; /* Red for incorrect characters */
    --error-bg   : #2c2e31; /* Background for incorrect characters (can be same as --bg or slightly different) */
}

/* ---------- LAYOUT ------------------------------------------------- */
body{
    display:flex;
    justify-content:center;
    padding:2rem;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* -------------  RESET (tiny) ---------------- */
*{margin:0;padding:0;box-sizing:border-box;font-family:inherit;} /* Inherit font-family */

#app{width:min(720px,95%);display:flex;flex-direction:column;gap:3rem; margin: auto;} /* Centered content block, increased gap */
h1{font-weight:700;text-align:center;letter-spacing:.02em; color: var(--text);}
h2{font-size:1rem;margin-bottom:.75rem;color: var(--text-dim);} /* Dimmer color for subheadings, increased margin-bottom */

/* ---------- CONTROLS ---------------------------------------------- */
/* give the option tiles a card-like feel */
.checkbox-grid, .radio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem; /* Spacing between options */
}

/* Add margin-bottom to the checkbox-grid for better separation before the "Mode" h2 */
#controls .checkbox-grid {
    margin-bottom: 2rem;
}

.checkbox-grid label,
.radio-grid    label{
    display:flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem .9rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    font-size:.9rem;
    color: var(--text);
    cursor:pointer;
    transition:border .15s, background-color .15s;
}
.checkbox-grid label:hover,
.radio-grid    label:hover{
    background:var(--border); /* Darken on hover */
}

/* use the browser's modern accent-color feature */
input[type=checkbox],
input[type=radio]{
    accent-color:var(--accent-500);
    cursor:pointer;
}
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible{
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
}


/* primary button */
button{
    padding:.7rem 1.4rem;
    border:none;
    border-radius:8px;
    background:var(--accent-500);
    color:var(--bg); /* Dark text on light accent button */
    font-size:1.05rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, transform .1s;
}
/* Add margin-top to the start button for better separation */
#controls button#startBtn {
    margin-top: 1.5rem;
}
button:hover{background:var(--accent-600);}
button:active{transform:scale(.97);}
button:focus-visible{outline:3px solid var(--accent-500);outline-offset:2px;}

/* ---------- LESSON ------------------------------------------------- */
#lesson{display:flex;flex-direction:column;gap:1.5rem}

/* remove "textbox" frame – just a clean strip with bottom rule */
#target{
    min-height:3.2rem;           /* keeps space before typing starts   */
    font-size:1.8rem;
    line-height:2.4rem;
    font-weight:500;
    letter-spacing:.04em;
    padding:.25rem 0;
    white-space:pre-wrap;
    word-wrap:break-word;
    /* border-bottom:2px solid var(--border); Removed, current char will be highlighted */
    font-family: 'SF Mono', 'Consolas', 'Menlo', 'Courier New', monospace; /* Monospaced font stack */
    color: var(--text); /* Ensure text color is applied */
}

/* colouring while typing */
#target span.done.ok  {color:var(--text-dim);} /* Dim color for correctly typed characters */
#target span.done.bad {
    color:var(--error-text);
    /* background:var(--error-bg); Optional: if you want a background for errors */
    border-radius:2px;
}
#target span.current  {
    background-color: var(--accent-500); /* Highlight current character */
    color: var(--bg); /* Text color on highlight (dark) */
    border-radius: 3px;
    padding: 0 1px; /* Slight padding for the background highlight */
}

#target span.current.error-highlight {
    background-color: var(--error-text); /* Red background for error on current char */
    color: var(--text); /* Keep text color readable, e.g., default text color */
    /* You might want to ensure the original text color is used, or white:
    color: white; */
}

/* hide actual text input */
#hiddenInput{position:absolute;left:-9999px;}

/* ---------- RESULTS ------------------------------------------------ */
#result{
    background:var(--surface);
    padding:2rem 1.75rem;
    border-radius:12px;
    text-align:center;
    border:1px solid var(--border);
    /* box-shadow:0 2px 8px rgba(0,0,0,.04); Removed for flatter dark theme */
    color: var(--text);
}
#stats{font-size:1.35rem;margin-top:1rem;font-weight:600;}
#stats strong { color: var(--accent-500); } /* Accent color for stat values */