@font-face {
  font-family: "NotoSans";
  src: url("../fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root { --ink: #111827; --paper: #f1f5f8; --surface: #ffffff; --line: #cbd5e1; --green: #d71920; --green-soft: #fde8e8; --red: #991b1b; --red-soft: #fde8e8; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.editor-brand { display: flex; align-items: center; gap: 0.7rem; }
.editor-brand img { width: 3rem; height: 3rem; }
.editor-brand h1 { font-size: 1.7rem; letter-spacing: -0.055em; }
.editor-brand h1 span { color: #d71920; }
.top-actions a.button { text-decoration: none; }
.top-actions a[hidden] { display: none; }

.editor-top {
  min-height: 5rem;
  padding: 1rem clamp(1rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
}

.editor-top h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.editor-top .subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: #645f55;
}

.top-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.header-session { display: grid; gap: 0.35rem; }
.header-session-fields { display: flex; align-items: end; gap: 0.5rem; flex-wrap: wrap; }
.header-session .field { min-width: 8rem; }
.header-session input { width: 9rem; border: 1px solid var(--line); padding: 0.5rem; background: var(--surface); color: var(--ink); }
.header-session-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.header-session .button { padding: 0.5rem 0.65rem; }
.header-session.authenticated .header-session-fields > .field,
.header-session.authenticated #session-login { display: none; }
.example-tools { margin: 0.5rem 0; }
.example-tools summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; }
.example-tools .icon-row { margin-top: 0.5rem; }
.output-section { display: grid; min-width: 0; gap: 0.6rem; }
.output-section .example-tools { margin: 0; }
.output-section .field, .output-options { min-width: 0; }
.output-section .output-options { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); }
.profile-import { min-width: 0; font-size: 0.78rem; }
.profile-import summary { cursor: pointer; font-weight: 600; }
.profile-import .field { margin-top: 0.5rem; }
.profile-import input[type="file"] { display: block; width: 100%; min-width: 0; font-size: 0.75rem; }
.mixed-segment { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.35rem; margin: 0.5rem 0; }
.mixed-segment label { display: grid; min-width: 0; gap: 0.2rem; font-size: 0.7rem; font-weight: 600; }
.mixed-controls { display: flex; gap: 0.2rem; }
.mixed-controls .button { flex: none; width: 1.85rem; height: 2rem; padding: 0; font-size: 1rem; line-height: 1; }
.mixed-controls .button:disabled { opacity: 0.35; cursor: default; }
.mixed-controls .button:disabled:hover { background: var(--surface); color: var(--ink); }
.mixed-add-actions { margin: 0.35rem 0 0.75rem; }
.mixed-add-actions .button { font-size: 0.8rem; }

.button {
  border: 1px solid var(--ink);
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  cursor: pointer;
}

.button:hover { background: var(--ink); color: white; }

.button.primary { background: var(--ink); color: white; }
.button.primary:hover { background: var(--green); border-color: var(--green); }

.editor-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) minmax(16rem, 22rem);
  align-items: stretch;
  min-height: calc(100vh - 5rem);
}

.panel {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: #f4f6f8;
  overflow-y: auto;
  max-height: calc(100vh - 5rem);
}

.panel.left { border-right: 1px solid var(--ink); }
.panel.right { border-left: 1px solid var(--ink); }

.panel h2 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.field { display: grid; gap: 0.3rem; }
.field[hidden] { display: none; }
.field > label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.panel select,
.panel input[type="number"],
.panel input[type="text"],
.panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.5rem;
  background: var(--surface);
  color: var(--ink);
}

.panel textarea { min-height: 4.5rem; resize: vertical; }

.check-line { display: flex; align-items: center; gap: 0.5rem; }
.check-line input { width: 1.05rem; height: 1.05rem; accent-color: var(--green); }

.object-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.object-list-toggle { margin-top: 0.6rem; }
.object-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.65rem; }
.tool-button { min-width: 0; min-height: 4.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.3rem; padding: 0.45rem 0.2rem; border: 1px solid #d9e0e7; border-radius: 0.35rem; background: #fff; color: #344154; cursor: pointer; font-size: 0.72rem; font-weight: 600; }
.tool-button:hover, .tool-button:focus-visible { background: #fff1f2; border-color: var(--green); color: var(--green); }
.tool-button svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-symbol { height: 1.35rem; line-height: 1.35rem; font-size: 1.4rem; }
.tool-text { font-family: Georgia, serif; font-weight: bold; }
#object-actions { margin-top: 0.9rem; }
.object-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.5rem; }
.action-tool { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.55rem; border: 1px solid #c9d5cf; border-radius: 0.3rem; background: #f8faf8; color: var(--ink); cursor: pointer; font-size: 0.75rem; }
.action-tool span { color: var(--green); font-size: 1.1rem; line-height: 1; }
.action-tool:hover, .action-tool:focus-visible { border-color: var(--green); background: #e0eee8; }
.action-tool.danger span { color: #a03434; }

/* Keep the selected object's settings readable without affecting other panels. */
#properties:not([hidden]) { display: grid; gap: 0.8rem; min-width: 0; padding: 0.85rem; border: 1px solid #d6dfd9; border-radius: 0.5rem; background: #f7f9f6; }
#properties > div:not([hidden]):not(.field):not(.field-row) { display: grid; gap: 0.7rem; min-width: 0; }
#properties .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
#properties .field { min-width: 0; gap: 0.3rem; }
#properties .field > label { color: #52645b; font-size: 0.67rem; letter-spacing: 0.035em; }
#properties input[type="text"], #properties input[type="number"], #properties select, #properties textarea { min-width: 0; border: 1px solid #c9d5cf; border-radius: 0.3rem; background: #fff; }
#properties input:focus-visible, #properties select:focus-visible, #properties textarea:focus-visible { outline: 2px solid #4b9279; outline-offset: 1px; }
#properties .check-line { min-height: 2.2rem; padding: 0.35rem 0.45rem; border: 1px solid #dce5df; border-radius: 0.3rem; background: #fff; }
#properties .check-line input { flex: none; margin: 0; }
#properties .check-line label { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
#properties > h2 { padding-top: 0.65rem; border-top: 1px solid #dce5df; }
.object-list-toggle summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; }
.object-list-toggle .object-list { max-height: 20rem; overflow-y: auto; margin-top: 0.5rem; }

.object-list button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
}

.object-list button[aria-current="true"] {
  border-color: var(--ink);
  background: var(--green);
  color: white;
}

.object-list .kind { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

.canvas-column {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-image: linear-gradient(45deg, #e2ddd1 25%, transparent 25%), linear-gradient(-45deg, #e2ddd1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2ddd1 75%), linear-gradient(-45deg, transparent 75%, #e2ddd1 75%);
  background-size: 1.2rem 1.2rem;
  background-position: 0 0, 0 0.6rem, 0.6rem -0.6rem, -0.6rem 0;
}

.canvas-frame {
  margin: 0 auto;
  background: white;
  box-shadow: 0 0.6rem 2rem rgb(23 32 29 / 25%);
  max-width: 100%;
  min-height: 0;
  max-height: 70vh;
  overflow: auto;
}

#label-editor { display: block; max-width: none; height: auto; cursor: default; touch-action: none; }

.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.zoom-control { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.zoom-control input { width: 8rem; accent-color: var(--green); }

.selection-readout {
  font-size: 0.8rem;
  font-weight: 600;
  color: #645f55;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.status-badge {
  padding: 0.35rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
}

.status-badge.error { color: var(--red); background: var(--red-soft); }

.diagnostics { margin: 0; padding: 0.75rem 0.9rem; list-style: none; display: grid; gap: 0.35rem; border-left: 0.3rem solid var(--yellow); background: #ebe6da; font-size: 0.85rem; }
.diagnostics.empty { border-left-color: var(--green); }
.diagnostics li { line-height: 1.35; }
.diagnostics .code { font-weight: 600; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.06em; color: #645f55; }

.hint { margin: 0; font-size: 0.78rem; color: #645f55; line-height: 1.45; }
.hint.error { color: var(--red); }

.output-preview { display: block; width: 100%; margin-top: 0.5rem; border: 1px solid var(--ink); background: #ffffff; }
.output-text { margin: 0.5rem 0 0; padding: 0.5rem; max-height: 12rem; overflow: auto; border: 1px solid var(--ink); background: #f4f1e8; font-size: 0.68rem; line-height: 1.3; white-space: pre-wrap; word-break: break-all; }
.output-preview[hidden], .output-text[hidden] { display: none; }

.icon-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.icon-row .button { flex: 1; text-align: center; padding: 0.5rem; }

@media (max-width: 1080px) {
  .editor-grid { grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); }
  .panel.right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ink); max-height: none; }
}

@media (max-width: 760px) {
  .editor-grid { grid-template-columns: 1fr; min-height: 0; }
  .panel { max-height: none; }
  .panel.left { border-right: 0; border-bottom: 1px solid var(--ink); }
}