*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'KaitiSubset';
  src: url('/static/kaiti-subset.woff2') format('woff2');
  font-display: block;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f2ede6;
  background-image: radial-gradient(ellipse at 50% 0%, #ebe4d8 0%, transparent 55%);
  color: #1a1a1a;
  min-height: 100vh;
  padding: 1.5rem 1rem 3rem;
}

#app {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

h1 {
  font-family: 'KaitiSubset';
  font-weight: 400;
  font-size: 3rem;
  color: #8b1a1a;
  text-shadow: 1px 2px 3px rgba(139, 26, 26, 0.15);
}

/* ── Draw buttons ── */
#draw-buttons {
  order: 99;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
  text-shadow: 1px 2px 3px rgba(139, 26, 26, 0.15);
}
#draw-buttons::-webkit-scrollbar { display: none; }

.btn-draw {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 1px solid #c8bfb4;
  border-radius: 50%;
  background: #faf7f2;
  font-family: 'KaitiSubset';
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-draw:hover:not(:disabled) { background: #ede6da; border-color: #a09080; }
.btn-draw:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Exercise section ── */
#exercise { display: flex; flex-direction: column; gap: 0.85rem; }

#counter {
  font-size: 1.25rem;
  color: #888;
  font-weight: 500;
}

#translation {
  font-size: 1.25rem;
  line-height: 1.5;
  padding: 0.85rem 1rem;
  background: #faf7f2;
  border: 1px solid #d9d0c4;
  border-radius: 8px;
  min-height: 3rem;
}

#proposition {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
  min-height: calc(1.4em + 1.5rem); /* une ligne : line-height + padding top+bottom */
}
#proposition:focus { outline: none; border-color: #888; }

#btn-validate {
  align-self: flex-start;
  padding: 0.6rem 1.4rem;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
#btn-validate:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Result section ── */
#result-text {
  padding: 0.85rem 1rem;
  background: #faf7f2;
  border: 1px solid #d9d0c4;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1.65;
  white-space: pre-wrap;
  min-height: 3rem;
}

/* ── Editors ── */
details {
  background: #faf7f2;
  border: 1px solid #d9d0c4;
  border-radius: 8px;
  overflow: hidden;
}

summary {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 1.25rem;
  color: #555;
  font-family: monospace;
  user-select: none;
}
summary:hover { background: #f2ede6; }

.editor-body {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor-body textarea {
  width: 100%;
  padding: 0.5rem;
  font-family: monospace;
  font-size: 1.25rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.editor-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-save {
  padding: 0.35rem 0.9rem;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}
.btn-save:hover { opacity: 0.8; }

.save-status {
  font-size: 1rem;
  color: #4a9;
}

/* ── Editors wrapper ── */
#editors {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Loading indicator ── */
@keyframes spin-braille {
  0%  { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
}

.loading::after {
  content: '⠋';
  animation: spin-braille 1s steps(10, end) infinite;
  font-size: 1.25em;
  color: #aaa;
}

/* ── Utilities ── */
[hidden] { display: none !important; }