/*
  Going Live, Week 6 starter: Practice Log appearance.
  Colors match the Week 2 starter and were checked for contrast:
    ink #202132 on paper #F5F2E9 -> about 14.2:1
    error red #B3261E on paper   -> about 5.8:1
    hint gray #626172 on paper   -> about 5.4:1
*/

body {
  margin: 0;
  background: #F5F2E9;
  color: #202132;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

h1 { margin-top: 0; font-size: 2rem; }
h2 { font-size: 1.25rem; margin-top: 2rem; }

.field { margin-bottom: 1rem; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.hint { margin: 0 0 0.25rem; color: #626172; font-size: 0.9rem; }

select,
input[type="text"],
input[type="password"],
button {
  font: inherit;
  min-height: 2.75rem;
  border-radius: 8px;
  box-sizing: border-box;
}

select,
input[type="text"],
input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 2px solid #626172;
  background: #FFFDF7;
  color: #202132;
}

/* The words explain the problem. The thicker red border is extra. */
[aria-invalid="true"] { border: 3px solid #B3261E; }

.error { margin: 0.25rem 0 0; color: #B3261E; font-weight: 700; }
.error:empty { display: none; }

button {
  padding: 0.5rem 1.25rem;
  border: 2px solid #202132;
  background: #DCF784;
  color: #202132;
  font-weight: 700;
  cursor: pointer;
}

/* Keyboard users must always see where they are. Never remove this. */
select:focus-visible,
input:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #3446EB;
  outline-offset: 3px;
}

.status { min-height: 1.5rem; font-weight: 600; }

.entries {
  padding: 1rem 1rem 1rem 2rem;
  background: #FFFDF7;
  border-left: 6px solid #3446EB;
  overflow-wrap: anywhere;
}

.testing { margin-top: 2rem; padding: 0.75rem; border: 2px dashed #626172; border-radius: 8px; }
.testing summary { cursor: pointer; font-weight: 600; }
.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }