/* Soren — semantics.css
   Styling for the semantic-layer suite: the metric & field modals and shared
   grammar. Authored to the "Soren Metrics & Fields" design spec. Two nouns get
   accent colors: metric = Racing Green (#1A5238), field = field-blue (#6E94AC). */

/* ── Modal shell ─────────────────────────────────────────────────────────── */
.sem-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 37, 33, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 40px;
}
.sem-modal {
  width: 640px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #F6F4EF;
  border: 1px solid #E4DFD4;
  border-radius: 3px 3px 10px 10px;
  box-shadow: 0 24px 70px rgba(20, 30, 25, .32);
}
.sem-modal-metric { border-top: 3px solid #1A5238; }
.sem-modal-field  { width: 600px; border-top: 3px solid #6E94AC; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.sem-modal-head {
  padding: 20px 26px 18px;
  border-bottom: 1px solid #E4DFD4;
}
.sem-modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.sem-chip-metric { background: rgba(26, 82, 56, .1); border: 1px solid rgba(26, 82, 56, .3); color: #1A5238; }
.sem-chip-field  { background: #DCE6EE; border: 1px solid #C6D4DF; color: #2F5168; }
.sem-chip-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sem-chip-metric .sem-chip-dot { background: #1A5238; }
.sem-chip-field  .sem-chip-dot { border-radius: 2px; background: #3A6076; }
.sem-modal-x { font-size: 18px; color: #9A958A; cursor: pointer; line-height: 1; }
.sem-modal-x:hover { color: #1C2521; }
.sem-modal-title {
  font-family: 'Newsreader', serif;
  font-size: 28px;
  color: #1C2521;
  letter-spacing: -.01em;
  margin-top: 12px;
}
.sem-modal-titlerow { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.sem-modal-op { font-size: 13px; color: #5C6660; }
.sem-modal-path {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #7C8A92;
  margin-top: 4px;
}

/* ── Section blocks ──────────────────────────────────────────────────────── */
.sem-modal-sec { padding: 18px 26px 0; }
.sem-modal-sec:last-of-type { padding-bottom: 4px; }
.sem-modal-sec-field {
  padding: 16px 26px;
  background: #DCE6EE;
  border-bottom: 1px solid #C6D4DF;
}
.sem-modal-label {
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A39E92;
  font-weight: 700;
  margin-bottom: 9px;
}
.sem-modal-sec-field .sem-modal-label { color: #5A6A74; margin-bottom: 8px; }

/* Definition — editor input vs viewer prose */
.sem-modal-def-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #C9C3B6;
  border-radius: 8px;
  padding: 12px 14px;
  background: #FBFAF7;
  font-size: 14.5px;
  font-family: inherit;
  color: #1C2521;
  line-height: 1.5;
  resize: vertical;
}
.sem-def-field { border-color: #B7C9D5; background: #fff; }
.sem-modal-def-read {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  color: #39434B;
  line-height: 1.5;
}
.sem-modal-hint { font-size: 11px; color: #9A958A; margin-top: 6px; }
.sem-modal-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── How it's built (metric) ─────────────────────────────────────────────── */
.sem-build {
  border: 1px solid #E4DFD4;
  border-radius: 9px;
  overflow: hidden;
  background: #FBFAF7;
}
.sem-build-row {
  display: flex;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #ECE8DF;
}
.sem-build-row:last-child { border-bottom: none; }
.sem-build-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(26, 82, 56, .1);
  border: 1px solid rgba(26, 82, 56, .3);
  color: #1A5238;
  font-family: 'Newsreader', serif;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sem-build-key {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #A39E92;
  font-weight: 600;
  width: 90px;
  flex: none;
}
.sem-build-body { flex: 1; min-width: 0; }
.sem-field-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2F5168;
  background: #DCE6EE;
  border: 1px solid #C6D4DF;
  border-radius: 6px;
  padding: 4px 10px;
}
.sem-field-chip .dot { width: 9px; height: 9px; border-radius: 2px; background: #3A6076; }
.sem-where {
  font-size: 11px;
  color: #9A958A;
  font-style: italic;
  font-family: 'Newsreader', serif;
}
.sem-cond-val {
  font-size: 12.5px;
  color: #1C2521;
  background: #fff;
  border: 1px solid #C9C3B6;
  border-radius: 6px;
  padding: 4px 9px;
}
.sem-add-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #1A5238;
  font-weight: 600;
  cursor: pointer;
  border: 1px dashed #A9C3B4;
  border-radius: 6px;
  padding: 5px 11px;
  align-self: flex-start;
  background: none;
}
.sem-build-note { font-size: 11px; color: #9A958A; line-height: 1.45; }

/* ── History ─────────────────────────────────────────────────────────────── */
.sem-hist-row { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.sem-hist-row:last-child { margin-bottom: 0; }
.sem-hist-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #F4F1E9;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
}
.sem-hist-txt { font-size: 13px; color: #1C2521; }
.sem-hist-txt strong { font-weight: 600; }
.sem-hist-leader { flex: 1; border-bottom: 1px dotted #D6D0C4; transform: translateY(-2px); }
.sem-hist-date { font-size: 11.5px; color: #9A958A; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.sem-modal-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 26px;
  margin-top: 18px;
  border-top: 1px solid #E4DFD4;
  background: #F1EEE7;
}
.sem-foot-delete { font-size: 12.5px; color: #B9837A; cursor: pointer; }
.sem-foot-graph { font-size: 12.5px; color: #1A5238; font-weight: 600; cursor: pointer; }
.sem-btn-cancel {
  border: 1px solid #C9C3B6;
  color: #5C6660;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #F6F4EF;
  font-family: inherit;
}
.sem-btn-save {
  background: #1A5238;
  color: #F6F4EF;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.sem-btn-propose {
  border: 1px solid #1A5238;
  color: #1A5238;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(26, 82, 56, .1);
  font-family: inherit;
}

/* ── List row hover (shared with the views) ──────────────────────────────── */
.sem-row { transition: background .1s ease; }
.sem-row:hover { background: #FBFAF7; }