/* LegalType Web Keyboard — base styles
   ------------------------------------------------------------------ */

:root {
  /* Brand palette mirrored from legaltype.com / app.legaltype.com */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --border: #e5e7eb;
  --text: #000000;
  --text-muted: #5f5f6a;
  --accent: #1BD1D8;
  --accent-soft: #cffafe;
  --accent-secondary: #e0e3f5;
  --key-bg: #ffffff;
  --key-bg-hover: #f7f7f7;
  --key-bg-active: #1BD1D8;
  --key-text: #000000;
  --key-text-active: #000000;
  --key-altgr: #F06BDA;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

.site-header {
  text-align: center;
  padding: 32px 16px 16px;
}

.page-title {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.tagline {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 15px;
}

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
}

/* Editor + toolbar
   ------------------------------------------------------------------ */
.editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 18px;
}

.editor-area {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-size: 16px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}

.editor-area:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.toolbar button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
}

.toolbar button:hover {
  background: var(--key-bg-hover);
}

.toolbar-sep {
  flex: 1;
}

.layout-picker {
  font-size: 14px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.layout-picker select {
  font-size: 14px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}

/* Keyboard
   ------------------------------------------------------------------ */
.keyboard-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}

.kb-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.kb-key {
  position: relative;
  flex: 1 1 0;
  min-width: 36px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--key-bg);
  color: var(--key-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 60ms ease, transform 60ms ease;
}

.kb-key:hover {
  background: var(--key-bg-hover);
}

.kb-key:active,
.kb-key.is-pressed {
  background: var(--key-bg-active);
  color: var(--key-text-active);
  transform: translateY(1px);
}

.kb-key.is-toggled {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Modifier keys are wider than character keys, so a centered label looks
   disconnected from the key. Pin every modifier label to the left edge
   with a small inset for a cleaner, more keyboard-like look.

   `text-align: left` is required (not just `justify-content: flex-start`)
   because narrow viewports — e.g. iPad portrait — wrap labels like
   "Caps Lock" or "⌥ Option" onto two lines, and we want both lines flush
   left rather than each line independently centered. */
.kb-key.is-mod {
  justify-content: flex-start;
  text-align: left;
  padding-left: 12px;
}

.kb-key.is-mod .kb-glyph {
  text-align: left;
}

/* Per-key flex-grow is set inline by keyboard.js from the layout's `width`
   value, so any fractional width works without needing a matching rule
   here. The data-width attribute is still emitted for inspection/debug. */

.kb-glyph {
  font-size: 16px;
}

.kb-altgr {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 11px;
  color: var(--key-altgr);
  font-weight: 600;
  pointer-events: none;
}

.kb-key.is-pressed .kb-altgr,
.kb-key:active .kb-altgr {
  color: #ffd1d1;
}

.kb-altgr-shift {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 11px;
  color: var(--key-altgr);
  font-weight: 600;
  pointer-events: none;
  opacity: 0.7;
}

.kb-key.is-pressed .kb-altgr-shift,
.kb-key:active .kb-altgr-shift {
  color: #ffd1d1;
}

.kb-key.is-mod {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
}

.hint {
  margin: 12px 4px 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.hint kbd {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

/* FAQ
   ------------------------------------------------------------------ */
.faq {
  max-width: 760px;
  margin: 32px auto 8px;
  padding: 0 4px;
}

.faq-heading {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 20px;
  color: var(--text);
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-item[open] {
  background: var(--surface);
}

.faq-question {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 40px;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  line-height: 1;
}

.faq-item[open] .faq-question::after {
  content: "\2212"; /* − */
}

.faq-question:hover {
  background: var(--key-bg-hover);
}

.faq-question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq-answer {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  padding: 0 16px 14px;
  border-top: 1px solid var(--border);
}

.faq-answer p {
  margin: 12px 0;
}

.faq-answer ul {
  margin: 8px 0 12px;
  padding-left: 22px;
}

.faq-answer li {
  margin: 4px 0;
}

.faq-takeaway {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .faq-heading {
    font-size: 22px;
  }

  .faq-question {
    font-size: 15px;
    padding: 12px 40px 12px 14px;
  }

  .faq-answer {
    font-size: 14px;
    padding: 0 14px 12px;
  }
}

/* Footer
   ------------------------------------------------------------------ */
.site-footer {
  text-align: center;
  padding: 24px 16px 32px;
  color: var(--text-muted);
  font-size: 13px;
}

.site-footer a {
  color: #1BD1D8;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Responsive
   ------------------------------------------------------------------ */

/* Tablets in portrait orientation
   The keyboard fits into a narrower viewport than desktop, but we still
   want to keep the full word labels ("Backspace", "Caps Lock", etc.)
   rather than collapsing them to symbols like we do on phones. Just
   shrink the modifier text and reduce key padding so labels stay inside
   the keycap bounds.

   Targets touch devices (pointer: coarse) in portrait orientation in
   the typical tablet width range. iPad 6th gen (768px portrait) hits
   this. Phones don't, because they fall under the 640px rule below. */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1024px) and (pointer: coarse) {
  .kb-key.is-mod {
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  .kb-key {
    font-size: 14px;
  }

  .kb-glyph {
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .keyboard-wrapper {
    padding: 8px;
  }

  .keyboard {
    gap: 4px;
  }

  .kb-row {
    gap: 4px;
  }

  .kb-key {
    min-width: 0;
    height: 44px;
    font-size: 14px;
    border-radius: 5px;
  }

  .kb-altgr,
  .kb-altgr-shift {
    font-size: 9px;
    bottom: 2px;
    right: 3px;
  }

  .kb-altgr-shift {
    top: 2px;
  }

  .page-title { font-size: 22px; }

  /* Drop the redundant modifier keys on mobile — there's no room and
     they don't do anything useful on a touchscreen anyway. */
  .kb-key[data-code="ShiftRight"],
  .kb-key[data-code="ControlLeft"],
  .kb-key[data-code="AltLeft"] {
    display: none;
  }

  /* Replace word labels on modifier keys with their universal symbols
     so they fit comfortably in a narrow viewport. */
  .kb-key.is-mod .kb-glyph {
    /* Hide the original text label without removing it (keeps a11y
       text + the click handler unaffected). */
    font-size: 0;
    line-height: 0;
  }

  .kb-key.is-mod::before {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--key-text);
  }

  .kb-key.is-mod.is-pressed::before,
  .kb-key.is-mod:active::before {
    color: var(--key-text-active);
  }

  .kb-key[data-code="Tab"]::before        { content: "\21E5"; } /* ⇥ */
  .kb-key[data-code="CapsLock"]::before   { content: "\21EA"; } /* ⇪ */
  .kb-key[data-code="ShiftLeft"]::before,
  .kb-key[data-code="ShiftRight"]::before { content: "\21E7"; } /* ⇧ */
  .kb-key[data-code="Enter"]::before      { content: "\21B5"; } /* ↵ */
  .kb-key[data-code="Backspace"]::before  { content: "\232B"; } /* ⌫ */
  .kb-key[data-code="ControlLeft"]::before,
  .kb-key[data-code="ControlRight"]::before { content: "\2303"; } /* ⌃ */
  .kb-key[data-code="AltLeft"]::before,
  .kb-key[data-code="AltRight"]::before   { content: "\2325"; } /* ⌥ */
}