/* Plain default styling. Themes are workspace data, not product code;
   this file stays deliberately unremarkable. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #222;
  background: #fafafa;
}

header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1rem;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

header h1 { font-size: 1.1rem; margin: 0; }

nav button {
  margin-right: 0.25rem;
}

nav button.active { font-weight: 700; }

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

.toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

input, select, textarea, button {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
}

button { cursor: pointer; }
button:hover { background: #f0f0f0; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #e5e5e5; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f2f6fa; }

.status-proposal { color: #a05a00; }

form#node-form { display: grid; gap: 0.6rem; max-width: 40rem; margin-top: 0.75rem; }
form#node-form label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: #555; }
form#node-form input, form#node-form select, form#node-form textarea { color: #222; }

.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

#detail-relations { margin-top: 1.5rem; max-width: 40rem; }
#detail-relations h2 { font-size: 0.95rem; border-bottom: 1px solid #ddd; padding-bottom: 0.2rem; }
#edge-list li, #child-list li { margin: 0.2rem 0; }
#edge-list .layer-tag {
  font-size: 0.75rem;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-left: 0.4rem;
}
#edge-list button { font-size: 0.75rem; padding: 0 0.4rem; margin-left: 0.5rem; }

#form-message, #edge-message { font-size: 0.85rem; color: #a00; }
#form-message.ok, #edge-message.ok { color: #070; }

a.node-link { color: #0645ad; text-decoration: none; cursor: pointer; }
a.node-link:hover { text-decoration: underline; }

#graph-svg { background: #fff; border: 1px solid #ddd; border-radius: 3px; }
#layer-toggles label { display: inline-flex; gap: 0.3rem; align-items: center; border: none; }