/* styles.css — simple button + closable modal with searchable font list */

/* Smoothing */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root{
  --fp-bg: #ffffff;
  --fp-fg: #111827;
  --fp-muted: #6b7280;
  --fp-border: #e5e7eb;
  --fp-shadow: 0 10px 30px rgba(0,0,0,0.12);
  --fp-radius: 12px;
  --fp-font: 16px;  /* font family + variant labels size */
  --fp-z: 5000;
}

* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: #f9fafb;
  color: var(--fp-fg);
  margin: 0;
  padding: 40px;
}
h2 { margin: 0 0 16px; }

/* Primary button */
.fp-primary-btn {
  appearance: none;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
}
.fp-primary-btn:hover { filter: brightness(1.05); }

/* Preview + controls */
#preview {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 22px;
  text-align: center;
}
#preview[contenteditable="true"] { outline: none; cursor: text; }

.controls {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
.controls label { font-size: 14px; color: #555; }
.controls select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 14px;
}
.current-font { font-size: 14px; }
.muted { color: var(--fp-muted); }

/* Overlay + Modal */
.fp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: var(--fp-z);
}

.fp-overlay[hidden] {
  display: none;
}

.fp-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0; left: 0;
  margin: auto;
  width: min(92vw, 760px);
  height: min(90vh, 680px);
  background: var(--fp-bg);
  box-shadow: var(--fp-shadow);
  border: 1px solid var(--fp-border);
  border-radius: 14px;
  z-index: calc(var(--fp-z) + 1);
  display: flex; flex-direction: column;
}

.fp-panel[hidden] {
  display: none;
}
@media (max-width: 640px){
  .fp-panel { width: 100vw; height: 100vh; border-radius: 0; }
}

.fp-panel-head {
  padding: 12px;
  border-bottom: 1px solid var(--fp-border);
  position: sticky; top: 0; z-index: 2;
  background: #fff;
}
.fp-title-wrap {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.fp-title-wrap h3 { margin: 0; font-size: 16px; }

/* icon-ish button */
.fp-icon-btn {
  border: 1px solid var(--fp-border);
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.fp-search-wrap { position: relative; }
#fpSearch {
  width: 100%; padding: 10px 36px 10px 12px; font-size: 14px;
  border: 1px solid var(--fp-border); border-radius: 10px;
}
#fpClear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
}

.fp-hint { margin-top: 6px; color: var(--fp-muted); font-size: 12px; }

.fp-list { flex: 1; overflow: auto; padding: 10px; }

/* Family row */
.fp-row {
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
}
.fp-row-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; align-items: center; cursor: pointer;
}
.fp-row .family { font-size: var(--fp-font); }  /* 16px */
.fp-row .sample { font-size: 14px; color: #374151; margin-top: 3px; }
.fp-row .count { font-size: 12px; color: #666; }
.fp-row .expander { color: #999; font-size: 14px; }

.fp-varlist { margin-top: 8px; display: none; }
.fp-row.expanded .fp-varlist { display: block; }

.fp-varitem {
  display: grid; grid-template-columns: 20px 120px 1fr;
  gap: 10px; align-items: center;
  padding: 8px 6px; border-radius: 8px;
  cursor: pointer;
}
.fp-varitem:hover { background: #f7f7fb; }
.fp-varlabel { font-size: 14px; color: #444; }
.fp-varpreview { font-size: var(--fp-font); } /* 16px */

/* Utility */
.error { color: #b91c1c; }