:root {
  color-scheme: light;
  --ink: #18201e;
  --muted: #69736f;
  --canvas: #f3f1ea;
  --surface: #fffefa;
  --surface-soft: #f8f7f1;
  --line: #dcded8;
  --line-strong: #c6cbc4;
  --green: #156b5d;
  --green-strong: #0d5147;
  --green-soft: #dff1eb;
  --amber: #ab6b1f;
  --amber-soft: #fff2d8;
  --red: #a33b45;
  --red-soft: #fae9eb;
  --blue: #365e9d;
  --shadow: 0 18px 50px rgb(26 44 38 / 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% -10%, rgb(21 107 93 / 0.09), transparent 27rem),
    radial-gradient(circle at 95% 5%, rgb(171 107 31 / 0.06), transparent 25rem),
    var(--canvas);
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(21 107 93 / 0.22);
  outline-offset: 2px;
}
a { color: inherit; }
code, pre, kbd { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.78rem clamp(1rem, 2.6vw, 2.6rem);
  color: #f7fffc;
  background: #142925;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.brand { display: inline-flex; align-items: center; gap: 0.72rem; text-decoration: none; }
.brand > span:last-child { display: grid; gap: 0.08rem; }
.brand strong { font-size: 0.95rem; letter-spacing: 0.01em; }
.brand small { color: #adc3bc; font-size: 0.7rem; letter-spacing: 0.035em; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.38);
  border-radius: 11px;
  color: #99e5d7;
  font: 600 1.2rem Georgia, serif;
}

.header-actions, .identity, .editor-actions { display: flex; align-items: center; gap: 0.62rem; }
.identity { min-width: 0; }
.identity-copy { min-width: 0; display: grid; }
.identity-copy strong, .identity-copy small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-copy strong { font-size: 0.8rem; }
.identity-copy small { color: #acc0ba; font-size: 0.68rem; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #16342e; background: #a5e2d6; font-size: 0.76rem; font-weight: 850; }
.sync-state { padding: 0.34rem 0.52rem; border-radius: 999px; color: #b8cbc5; background: rgb(255 255 255 / 0.07); font-size: 0.68rem; font-weight: 760; }
.sync-state[data-kind="busy"] { color: #fde2ae; }
.sync-state[data-kind="saved"] { color: #a6e6d7; }
.sync-state[data-kind="error"] { color: #ffc3c8; }

.auth-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem clamp(1rem, 2.6vw, 2.6rem);
  color: #36537d;
  background: #edf3fc;
  border-bottom: 1px solid #c6d6ed;
}
.auth-notice[data-kind="warning"] { color: #74470f; background: var(--amber-soft); border-color: #ebcd92; }
.auth-notice strong { display: block; font-size: 0.78rem; }
.auth-notice p { margin: 0.18rem 0 0; font-size: 0.7rem; line-height: 1.5; }
.auth-notice .button { flex: 0 0 auto; }

.button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.61rem 0.88rem;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: 0.48; }
.button-primary { color: white; background: var(--green); }
.button-primary:hover:not(:disabled) { background: var(--green-strong); }
.button-secondary { color: var(--green-strong); background: var(--green-soft); border-color: #acd9ce; }
.button-quiet { color: #3c504a; background: white; border-color: var(--line-strong); }
.app-header .button-quiet { color: #dce9e5; background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.2); }
.button-google { color: #1f332e; background: white; }
.button-danger { color: var(--red); background: white; border-color: #e2bfc3; }
.button-danger:hover:not(:disabled) { color: white; background: var(--red); border-color: var(--red); }
.button.compact { min-height: 32px; padding: 0.43rem 0.62rem; font-size: 0.73rem; }
.button-count { min-width: 1.35rem; padding: 0.14rem 0.36rem; border-radius: 999px; background: rgb(255 255 255 / 0.72); font-size: 0.66rem; text-align: center; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; color: #3f5851; background: white; cursor: pointer; font-size: 1.05rem; }
.icon-button:hover { color: var(--green); border-color: var(--green); }

.search-box { min-width: min(460px, 48vw); display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--line-strong); border-radius: 10px; color: #73807c; background: white; }
.search-box input { min-width: 0; flex: 1; height: 40px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-box kbd { padding: 0.13rem 0.34rem; border: 1px solid #d8dbd6; border-radius: 5px; color: #818985; background: #f5f5f0; font-size: 0.68rem; }
.workspace-shell {
  width: 100%;
  display: grid;
  align-items: stretch;
  margin: 0 auto;
}
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.folder-panel, .records-panel { padding: 1rem 0.72rem; }
.editor-panel { min-height: 720px; overflow: hidden; container: editor-panel / inline-size; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.1rem 0.35rem 0.75rem; }
.panel-heading h1, .panel-heading h2 { margin: 0; font-size: 1rem; }
.panel-heading-copy { min-width: 0; }
.panel-heading-actions { display: flex; align-items: center; gap: 0.38rem; }
.current-view-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin: -0.15rem 0.35rem 0.65rem;
  padding: 0.48rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.68rem;
  line-height: 1.35;
}
.current-view-settings > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-settings-action { min-width: max-content; white-space: nowrap; }
.panel-collapse-button { width: 32px; height: 32px; display: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: #52645f; background: white; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.panel-collapse-button:hover, .panel-collapse-button:focus-visible { color: var(--green-strong); border-color: #9fc7bd; background: var(--green-soft); }
.eyebrow { margin: 0 0 0.24rem; color: var(--green); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.count-pill { min-width: 28px; padding: 0.25rem 0.45rem; border-radius: 999px; color: #566761; background: #eeefea; text-align: center; font-size: 0.7rem; font-weight: 780; }
.panel-note { margin: 1rem 0.35rem 0; padding-top: 0.85rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; line-height: 1.55; }
.panel-note code { color: var(--green-strong); }

.folder-tree-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 0.18rem;
  border-radius: 8px;
}
.folder-disclosure {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #60716c;
  background: transparent;
  cursor: pointer;
}
.folder-disclosure:hover {
  color: var(--green-strong);
  background: #f1f3ee;
}
.folder-disclosure:focus-visible {
  color: var(--green-strong);
  border-color: #abd0c6;
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgb(21 107 93 / 0.1);
}
.folder-disclosure-chevron {
  display: grid;
  place-items: center;
}
.folder-disclosure-chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  transition: transform 140ms ease;
}
.folder-disclosure[aria-expanded="true"] .folder-disclosure-chevron svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .folder-disclosure-chevron svg { transition: none; }
}
.folder-disclosure-spacer {
  width: 24px;
  height: 24px;
  min-width: 24px;
}
.folder-row {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.58rem;
  border: 0;
  border-radius: 8px;
  color: #40504c;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.folder-row--system { grid-template-columns: 24px minmax(0, 1fr) auto; }
.folder-row-count {
  justify-self: end;
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.folder-row.is-selected .folder-row-count { color: inherit; }
.folder-row:hover { background: #f1f3ee; }
.folder-row.is-selected { color: var(--green-strong); background: var(--green-soft); font-weight: 760; }
.folder-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--amber);
  font-size: 0.93rem;
  text-align: center;
}
.folder-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.folder-icon--smart-view { color: var(--blue); }
.folder-icon--unknown { color: #89938f; }
.folder-icon--error { color: var(--red); }
.folder-edit-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  opacity: 0;
  color: #60716c;
  background: transparent;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.folder-tree-row:hover .folder-edit-button,
.folder-tree-row:focus-within .folder-edit-button,
.folder-tree-row.is-open .folder-edit-button,
.folder-row.is-selected + .folder-edit-button {
  opacity: 1;
  pointer-events: auto;
}
.folder-edit-button:hover, .folder-edit-button:focus-visible {
  color: var(--green-strong);
  border-color: #abd0c6;
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgb(21 107 93 / 0.1);
}
.folder-tree-row.is-open { box-shadow: inset 2px 0 var(--green); }
.folder-children { margin-left: 0.8rem; padding-left: 0.34rem; border-left: 1px solid #e1e3de; }

.record-list { display: grid; gap: 0.34rem; }
.record-card {
  width: 100%;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.64rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.record-card:hover { border-color: var(--line); background: var(--surface-soft); }
.record-card.is-selected { border-color: #a8d4c9; background: var(--green-soft); }
.record-glyph { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: #32534b; background: #e9eeea; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; }
.record-copy { min-width: 0; display: grid; gap: 0.16rem; }
.record-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.record-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.66rem; }
.visibility-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa39f; }
.visibility-dot[data-visibility="shared"] { background: var(--blue); }
.empty-state { padding: 3.5rem 1rem; color: var(--muted); text-align: center; }
.empty-state > span { display: block; color: #9ca7a2; font-size: 2.4rem; }
.empty-state h3 { margin: 0.7rem 0 0.35rem; color: #34433f; font: 500 1.08rem Georgia, "Noto Serif TC", serif; }
.empty-state p { margin: 0; font-size: 0.75rem; line-height: 1.6; }

.editor-placeholder { min-height: 710px; display: grid; place-content: center; justify-items: center; padding: 2rem; text-align: center; }
.editor-placeholder .monogram { width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 1.2rem; border: 1px solid #9fc7bd; border-radius: 26px; color: var(--green); background: linear-gradient(145deg, #eef8f4, white); font: 600 1.15rem Georgia, serif; box-shadow: 0 16px 40px rgb(21 107 93 / 0.1); }
.editor-placeholder h2 { margin: 0; font: 500 clamp(1.6rem, 3vw, 2.35rem) Georgia, "Noto Serif TC", serif; }
.editor-placeholder > p:not(.eyebrow) { max-width: 560px; margin: 0.8rem 0 1.2rem; color: var(--muted); line-height: 1.75; }
.editor-placeholder code { color: var(--green); }
.editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.editor-header > div:first-child { min-width: 0; }
.editor-header h2 { max-width: 650px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 1.35rem Georgia, "Noto Serif TC", serif; }
.record-identity { margin: 0.22rem 0 0; color: #77827e; font: 0.67rem "SFMono-Regular", Consolas, monospace; }
.visibility-control { display: flex; align-items: center; gap: 0.38rem; color: #6d7975; font-size: 0.62rem; font-weight: 760; }
.visibility-control select { min-height: 39px; padding: 0.35rem 1.7rem 0.35rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 8px; color: #32443f; background: white; }
.editor-actions { flex: 0 0 auto; align-items: center; }
.document-route-actions { display: flex; align-items: center; gap: 0.38rem; padding-right: 0.62rem; border-right: 1px solid var(--line); }
.document-route-actions .button { white-space: nowrap; }
.conflict-banner, .readonly-banner { margin: 1rem 1.2rem 0; padding: 0.8rem 0.9rem; border-radius: 10px; }
.conflict-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #77470e; background: var(--amber-soft); border: 1px solid #ebcd92; }
.conflict-banner strong { font-size: 0.82rem; }
.conflict-banner p { margin: 0.2rem 0 0; font-size: 0.72rem; line-height: 1.5; }
.readonly-banner { color: #36537d; background: #edf3fc; border: 1px solid #c6d6ed; font-size: 0.73rem; line-height: 1.55; }
.editor-mount { padding: 1.15rem 1.2rem 1.4rem; }
.editor-mount[aria-busy="true"] { min-height: 500px; display: grid; place-items: center; color: var(--muted); }
.editor-mount[aria-busy="true"]::before { content: "正在展開 XML template…"; }
.orphan-xml-viewer { margin: 1rem 1.2rem 1.4rem; overflow: hidden; border: 1px solid #a9c2bb; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgb(17 37 31 / 0.06); }
.orphan-xml-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.orphan-xml-heading h3 { margin: 0; color: #2f443e; font: 600 1rem Georgia, "Noto Serif TC", serif; }
.orphan-xml-heading p:last-child { max-width: 760px; margin: 0.38rem 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.6; }
.orphan-type-badge { flex: 0 0 auto; padding: 0.34rem 0.52rem; border: 1px solid #9fbdb5; border-radius: 999px; color: #315f55; background: #eaf5f1; font: 750 0.62rem "SFMono-Regular", Consolas, monospace; }
.xml-repair-warning { margin: 0.82rem 0.9rem 0; padding: 0.78rem 0.85rem; border: 1px solid #e2bd78; border-radius: 9px; color: #704b0d; background: #fff7e8; font-size: 0.7rem; line-height: 1.55; }
.xml-repair-warning strong { display: block; margin-bottom: 0.2rem; }
.xml-repair-warning p { margin: 0 0 0.45rem; }
.xml-repair-warning code { display: block; padding: 0.42rem 0.5rem; overflow-wrap: anywhere; border-radius: 6px; color: #6a3d0a; background: rgb(255 255 255 / 0.72); font-size: 0.64rem; }
.xml-repair-editor { display: grid; gap: 0.55rem; padding: 0.82rem 0.9rem; }
.xml-repair-editor > label { color: #3f554f; font-size: 0.68rem; font-weight: 780; }
.xml-repair-editor textarea { width: 100%; min-height: 330px; resize: vertical; padding: 0.82rem; border: 1px solid #9fb7b0; border-radius: 9px; color: #d6ebe5; background: #142722; font: 0.7rem/1.6 "SFMono-Regular", Consolas, "Liberation Mono", monospace; tab-size: 2; white-space: pre; }
.xml-repair-editor textarea:focus { border-color: var(--green); outline: 3px solid rgb(21 107 93 / 0.17); }
.xml-repair-editor textarea[readonly] { color: #aebfba; background: #20312d; }
.xml-repair-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 0.45rem; }
.xml-repair-editor > p { margin: 0; color: var(--muted); font-size: 0.65rem; line-height: 1.55; }
.orphan-xml-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.62rem 0.78rem; color: #5e716b; background: #f8faf9; font-size: 0.66rem; }
.orphan-xml-code { max-height: min(68vh, 780px); margin: 0; padding: 1rem; overflow: auto; color: #d6ebe5; background: #142722; font: 0.7rem/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace; tab-size: 2; white-space: pre; }
.orphan-xml-code:focus-visible { outline: 3px solid #6fc6b0; outline-offset: -3px; }
.xml-token-delimiter { color: #8fb6aa; }
.xml-token-name { color: #7dd7c0; }
.xml-token-attribute { color: #b9d8ff; }
.xml-token-value { color: #f4ce87; }
.xml-token-comment { color: #88a39b; font-style: italic; }
.xml-token-cdata { color: #d9b7ef; }
.xml-token-declaration { color: #d0a8ed; }

.document-form { display: grid; gap: 1rem; }
.document-intro { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.document-intro h3 { margin: 0; font: 500 1.4rem Georgia, "Noto Serif TC", serif; }
.document-intro p { margin: 0.36rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.6; }
.form-section { display: grid; gap: 0.72rem; padding: 0.92rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.form-section.soft { background: var(--surface-soft); }
.form-section h4 { margin: 0; color: #384a45; font-size: 0.78rem; }
.form-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { min-width: 0; display: grid; gap: 0.3rem; }
.field > span { color: #566660; font-size: 0.7rem; font-weight: 760; }
.field input, .field textarea, .field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 0.53rem 0.65rem;
  border: 1px solid #cbd1cb;
  border-radius: 8px;
  color: var(--ink);
  background: white;
  outline: none;
}
.field textarea { min-height: 106px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgb(21 107 93 / 0.11); }
.field input[readonly], .field textarea[readonly], .field select:disabled { color: #5d6b67; background: #ecefea; }
.field input[data-x-invalid], .field textarea[data-x-invalid] { border-color: var(--red); box-shadow: 0 0 0 3px rgb(163 59 69 / 0.1); }
.full-field { grid-column: 1 / -1; }
.title-field input { min-height: 48px; border: 0; border-bottom: 1px solid #b9c3be; border-radius: 0; padding-left: 0; font: 500 1.45rem Georgia, "Noto Serif TC", serif; }
.owner-field { position: relative; }
.owner-field::after { content: "顯示用"; position: absolute; right: 0.52rem; bottom: 0.64rem; padding: 0.16rem 0.34rem; border-radius: 4px; color: #6e7975; background: #dfe4df; font-size: 0.58rem; font-weight: 770; }
.repeat-list { display: grid; gap: 0.5rem; }
.repeat-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: end; padding: 0.65rem; border: 1px solid #dfe2dd; border-radius: 9px; background: white; }
.repeat-card.two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.repeat-actions { display: flex; gap: 0.26rem; padding-bottom: 0.04rem; }
.repeat-actions .icon-button { width: 30px; height: 30px; font-size: 0.75rem; }
.relation-participant { align-items: center; gap: 0.42rem 0.55rem; padding: 0.48rem 0.55rem; }
.relation-participant-fields { display: grid; grid-template-columns: minmax(6.5rem, 0.75fr) minmax(6.5rem, 0.75fr) minmax(12rem, 1.5fr); gap: 0.45rem; align-items: end; }
.relation-participant .field { gap: 0.16rem; }
.relation-participant .field input { min-height: 34px; padding: 0.38rem 0.5rem; }
.relation-participant-reference { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.38rem 0.55rem; }
.relation-reference-summary { max-width: 100%; padding: 0.18rem 0.42rem; overflow-wrap: anywhere; border-radius: 8px; color: #496058; background: #e8efeb; font-size: 0.68rem; font-weight: 760; }
.relation-reference-summary[data-has-references="true"] { color: #1c5d47; background: #d7eee2; }
.relation-participant-reference .metadata-note { margin: 0; font-size: 0.66rem; }
.relation-compound-panel { gap: 0.8rem; }
.relation-compound-status { margin: 0; color: var(--muted); font-size: 0.68rem; }
.relation-compound-status[data-kind="error"], .relation-compound-error { color: var(--red); }
.relation-compound-card-list { display: grid; gap: 0.55rem; }
.relation-compound-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.relation-compound-card { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.relation-compound-card-copy { min-width: 0; }
.relation-compound-card-copy h5 { margin: 0.12rem 0 0.24rem; font-size: 0.92rem; }
.relation-compound-card-copy p { margin: 0; }
.relation-compound-card-actions { display: flex; align-items: center; gap: 0.35rem; }
.relation-compound-card-actions .icon-button,
.relation-compound-participant > .icon-button,
.relation-compound-arc > .icon-button { min-width: 44px; width: 44px; height: 44px; }
.relation-compound-dialog { width: min(960px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px rgb(24 49 42 / 0.3); }
.relation-compound-dialog::backdrop { background: rgb(18 34 30 / 0.42); }
.relation-compound-dialog-shell { display: grid; gap: 0.85rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 1rem; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.relation-assertion-identity { margin: 0; padding: 0.55rem 0.7rem; border-radius: 8px; color: #36537d; background: #e8f0fb; font-size: 0.72rem; font-weight: 720; }
.relation-compound-error { margin: 0; padding: 0.55rem 0.7rem; border: 1px solid #e4b9be; border-radius: 8px; background: #fff1f2; }
.relation-compound-participants, .relation-compound-arcs { display: grid; gap: 0.55rem; }
.relation-compound-participant, .relation-compound-arc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: end; margin: 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.relation-compound-participant legend, .relation-compound-arc legend { padding: 0 0.25rem; color: #566660; font-size: 0.68rem; font-weight: 760; }
.relation-compound-participant-fields { display: grid; grid-template-columns: minmax(7rem, 0.75fr) minmax(7rem, 0.75fr) minmax(12rem, 1.5fr); gap: 0.55rem; }
.relation-compound-participant .relation-participant-reference { grid-column: 1; }
.relation-compound-arc .form-grid { grid-column: 1; }
.relation-compound-dialog .dialog-actions { position: sticky; bottom: -1rem; padding: 0.8rem 0 0; background: linear-gradient(to bottom, transparent, var(--surface) 24%); }
.attachment-summary { display: grid; grid-template-columns: 1fr 130px; gap: 0.55rem; }
.attachment-card { align-items: start; }
.attachment-card .attachment-summary { grid-column: 1; }
.attachment-card .repeat-actions { grid-column: 2; grid-row: 1 / span 2; }
.attachment-runtime { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.38rem; padding-top: 0.1rem; }
.attachment-state { display: inline-flex; align-items: center; min-height: 26px; padding: 0.25rem 0.48rem; border-radius: 999px; color: #52625d; background: #ecefea; font-size: 0.65rem; font-weight: 780; }
.attachment-state[data-state="active"] { color: var(--green-strong); background: var(--green-soft); }
.attachment-state[data-state="available"] { color: #36537d; background: #e8f0fb; }
.attachment-state[data-state="staged"] { color: #74470f; background: var(--amber-soft); }
.attachment-state[data-state="metadataonly"] { color: #6c4d22; background: #f3eadc; }
.metadata-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem; }
.metadata-note { margin: 0; color: var(--muted); font-size: 0.67rem; line-height: 1.55; }
.folder-allowed-document-types { margin: 0; }
.folder-allowed-document-types legend { padding: 0 0.25rem; color: #384a45; font-size: 0.78rem; font-weight: 760; }
.folder-allowed-document-type-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.folder-allowed-document-type-option { min-height: 40px; display: flex; align-items: center; gap: 0.42rem; padding: 0.48rem 0.58rem; border: 1px solid var(--line); border-radius: 8px; color: #465a54; background: white; font-size: 0.7rem; font-weight: 720; }
.folder-sort-section { display: grid; gap: 0.55rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--line); }
.folder-legacy-sort-warning { margin: 0; padding: 0.58rem 0.68rem; border: 1px solid #e5cf9a; border-radius: 8px; color: #70531f; background: #fff8e8; }
.form-grid.folder-query-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.folder-sort-card .metadata-note { grid-column: 1; }

.work-plan-form { gap: 1.15rem; }
.work-plan-intro { display: grid; gap: 0.72rem; }
.work-plan-intro > p { max-width: 780px; }
.work-plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr); gap: 1rem; align-items: start; }
.work-plan-main { min-width: 0; display: grid; gap: 1rem; }
.work-plan-sidebar { min-width: 0; position: sticky; top: 0.75rem; }
.form-grid.work-plan-date-fields { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.work-plan-status-card { box-shadow: 0 12px 28px rgb(25 60 50 / 0.07); }
.work-plan-card { min-width: 0; display: grid; gap: 0.72rem; padding: 0.8rem; border: 1px solid #d8dfda; border-radius: 10px; background: white; }
.work-plan-phase { border-left: 4px solid #6cae9e; box-shadow: 0 6px 18px rgb(25 60 50 / 0.04); }
.work-plan-step { margin-left: 0.5rem; border-left: 3px solid #b8c9c3; background: #fcfdfc; }
.work-plan-step-heading { grid-template-columns: minmax(72px, 0.3fr) minmax(180px, 1.4fr) minmax(130px, 0.8fr); }
.work-plan-step-relations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; padding-top: 0.25rem; border-top: 1px dashed var(--line); }
.work-plan-governance .repeat-list:empty::before,
.work-plan-phase-list:empty::before { content: "尚無項目"; padding: 0.7rem; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 0.68rem; text-align: center; }
.work-plan-card h5 { margin: 0; color: #384a45; font-size: 0.74rem; }
.work-plan-risk { border-left: 3px solid #d6a455; }
.work-plan-decision { border-left: 3px solid #7f9dc8; }
.folder-allowed-document-type-option input { width: 18px; height: 18px; accent-color: var(--green); }
[data-x-ref], [x\:ref] { display: none !important; }
.xst-field-error { color: var(--red); font-size: 0.65rem; font-weight: 720; }

.reference-editor { margin: 0 1.2rem 1.2rem; border: 1px solid #bdd2cb; border-radius: 11px; background: #f8fbfa; overflow: hidden; }
.reference-editor > summary { padding: 0.72rem 0.85rem; color: #365b52; background: #edf5f2; cursor: pointer; font-size: 0.73rem; font-weight: 780; }
.reference-editor-body { display: grid; gap: 0.7rem; padding: 0.82rem; border-top: 1px solid #cfe0da; }
.reference-editor-dialog { width: min(720px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); margin: auto; padding: 0; overflow: hidden; color: var(--ink); box-shadow: 0 30px 90px rgb(17 37 31 / 0.24); }
.reference-editor-dialog::backdrop { background: rgb(14 29 25 / 0.54); backdrop-filter: blur(4px); }
.reference-editor-dialog .reference-editor-body { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; border-top: 0; }
.reference-editor-help, .reference-status { margin: 0; color: var(--muted); font-size: 0.66rem; line-height: 1.5; }
.form-binding-selection { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.55rem; }
.reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem; }
.reference-current { min-width: 0; display: block; padding: 0.5rem 0.6rem; overflow-wrap: anywhere; border-radius: 7px; color: #405a53; background: white; font: 0.63rem/1.5 "SFMono-Regular", Consolas, monospace; }
.reference-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.reference-editor-heading h5 { margin: 0; font-size: 0.76rem; }
.flow-node-reference-editor, .graph-node-reference-editor { display: grid; gap: 0.55rem; margin: 0; padding: 0.62rem; border-color: var(--line); border-radius: 9px; background: white; overflow: visible; }
.flow-node-reference-editor .reference-current, .graph-node-reference-editor .reference-current { background: var(--surface-soft); }
.reference-summary-panel { display: grid; gap: 0.55rem; margin: 0; padding: 0.62rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.reference-summary-panel .reference-editor-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; }
.reference-field-shell { min-width: 0; display: grid; gap: 0.35rem; }
.reference-field-shell .reference-affordance { margin: 0; }
.reference-affordance { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: -0.12rem 0 0.45rem; }
.reference-affordance.reference-affordance-inline { margin: 0; }
.reference-affordance-item { min-width: 0; max-width: 100%; display: inline-flex; flex: 0 1 auto; align-items: center; gap: 0.35rem; }
.reference-affordance-status { min-width: 0; max-width: min(42rem, 68vw); flex: 1 1 auto; padding: 0.3rem 0.48rem; overflow: hidden; overflow-wrap: anywhere; border: 1px solid #d8e1dd; border-radius: 7px; color: #53635e; background: #f2f5f3; font-size: 0.65rem; line-height: 1.35; }
.reference-affordance-item[data-reference-state="configured"] .reference-affordance-status,
.reference-affordance-item[data-anchor-state="configured"] .reference-affordance-status { border-color: #acd4c5; color: #155d49; background: #e1f2eb; font-weight: 760; }
.reference-affordance-inline .reference-affordance-status { max-width: min(20rem, 42vw); }
.reference-affordance .icon-button { min-width: 44px; min-height: 44px; }

.form-editor-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.72rem; }
.form-editor-grid[data-inspector-mode="docked"][data-inspector-open="true"] { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); padding-right: 1.2rem; }
.form-canvas-shell { position: relative; min-width: 0; min-height: 240px; isolation: isolate; }
.form-inspector { position: absolute; z-index: 4; top: 12px; right: 12px; width: 340px; min-width: min(300px, calc(100% - 24px)); max-height: min(620px, calc(100% - 24px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border: 1px solid #a9bcb6; border-radius: 12px; color: var(--ink); background: var(--surface); box-shadow: 0 18px 48px rgb(17 37 31 / 0.24); }
.form-inspector[hidden] { display: none; }
.form-inspector > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.58rem 0.65rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); user-select: none; }
.form-inspector > header > div { min-width: 0; }
.form-inspector > header h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.form-inspector-notice { margin: 0; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.65rem; line-height: 1.45; }
.form-inspector form { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.form-inspector fieldset { min-width: 0; margin: 0; padding: 0.72rem; border: 0; }
.form-inspector-controls { display: grid; gap: 0.7rem; }
.form-inspector-controls .field { display: grid; gap: 0.32rem; }
.form-inspector-controls textarea { min-height: 108px; resize: vertical; }
.form-inspector.inspector-surface--docked { position: static; width: 100%; max-height: none; min-height: 280px; height: 100%; }
.form-inspector.inspector-surface--docked #form-inspector-drag-handle { cursor: default; }
.form-inspector.inspector-surface--docked .flow-inspector-resize-handle { display: none; }
.form-inspector.inspector-surface--overlay #form-inspector-drag-handle { cursor: move; touch-action: none; }

.flow-editor { display: grid; gap: 0.55rem; padding: 0.65rem 0.9rem 1rem; }
.flow-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.78rem; border-bottom: 1px solid var(--line); }
.flow-editor-toolbar h3 { margin: 0; font: 500 1.35rem Georgia, "Noto Serif TC", serif; }
.flow-help { max-width: 680px; margin: 0.38rem 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.6; }
.inspector-toolbar-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.inspector-surface-switch { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.18rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.inspector-surface-switch .button { min-height: 32px; padding-inline: 0.55rem; border-color: transparent; }
.inspector-surface-switch .button[aria-pressed="true"] { border-color: #9fc9bd; color: var(--green-strong); background: var(--green-soft); box-shadow: inset 0 0 0 1px rgb(21 107 93 / 0.08); }
.inspector-surface-switch .button[data-inspector-mode="detached"] { color: var(--blue); }
.inspector-surface-switch .button[data-inspector-mode="detached"][aria-pressed="true"] { border-color: #a9bedc; color: #294f88; background: #e7effa; }
.inspector-surface-switch--preset { flex: 0 0 auto; background: white; }
.inspector-surface-switch--preset:focus-within { border-color: #9fc9bd; }
.inspector-surface-switch--preset .button:hover:not(:disabled) { transform: none; }
.inspector-surface-switch--preset .button:focus-visible {
  outline: 3px solid rgb(49 96 167 / 0.34);
  outline-offset: 1px;
}
.canvas-reference-choice {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 7;
  display: grid;
  gap: 0.35rem;
  width: min(360px, calc(100% - 16px));
  max-height: min(320px, calc(100% - 16px));
  padding: 0.42rem;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(17 37 31 / 0.22);
  transform: translate3d(var(--reference-context-x, 0), var(--reference-context-y, 0), 0);
  pointer-events: auto;
  touch-action: manipulation;
}
.canvas-reference-choice[hidden] { display: none; }
.canvas-reference-choice:focus-within { border-color: #9fc9bd; }
.canvas-reference-choice-title {
  margin: 0;
  padding: 0.18rem 0.36rem 0.08rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.canvas-reference-choice-list {
  min-height: 0;
  display: grid;
  gap: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.canvas-reference-choice-item,
.canvas-reference-choice-item.button,
.canvas-reference-choice-pages .button {
  min-height: 44px;
}
.canvas-reference-choice-item,
.canvas-reference-choice-item.button {
  width: 100%;
  display: grid;
  gap: 0.12rem;
  justify-items: start;
  padding: 0.5rem 0.62rem;
  text-align: left;
  white-space: normal;
}
.canvas-reference-choice-item:hover:not(:disabled) { transform: none; }
.canvas-reference-choice-item:focus-visible,
.canvas-reference-choice-pages .button:focus-visible {
  outline: 3px solid rgb(49 96 167 / 0.34);
  outline-offset: 1px;
}
.canvas-reference-choice-label {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-weight: 750;
  text-overflow: ellipsis;
}
.canvas-reference-choice-detail {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font: 0.68rem/1.35 "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-reference-choice-item[data-external="true"] .canvas-reference-choice-label { color: var(--blue); }
.canvas-reference-choice-group {
  display: grid;
  gap: 0.42rem;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}
.canvas-reference-choice-group-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-reference-choice-group-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.35rem;
}
.canvas-reference-choice-group-actions .canvas-reference-choice-item,
.canvas-reference-choice-group-actions .canvas-reference-choice-item.button {
  justify-items: center;
  padding: 0.42rem 0.5rem;
  text-align: center;
}
.canvas-reference-choice-pages {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.25rem;
  border-top: 1px solid var(--line);
  padding-top: 0.32rem;
}
.canvas-reference-choice-pages[hidden] { display: none; }
.canvas-reference-choice-pages output {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}
.canvas-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem 0.72rem; padding: 0.52rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.canvas-control-row { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.42rem; }
.canvas-control-row-primary { flex: 1 1 520px; }
.canvas-control-row-secondary { width: auto; flex: 0 1 auto; margin-left: auto; }
.canvas-inspector-mode-control { min-width: 0; display: flex; align-items: center; gap: 0.38rem; color: #50635d; font-size: 0.67rem; font-weight: 780; }
.canvas-inspector-mode-control > span { white-space: nowrap; }
.canvas-zoom-controls { min-width: 0; display: flex; align-items: center; gap: 0.32rem; padding: 0.25rem 0.32rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.canvas-zoom-controls .icon-button { width: 30px; height: 30px; flex: 0 0 auto; }
.canvas-zoom-controls input[type="range"] { width: 104px; accent-color: var(--green); }
.canvas-zoom-controls output { min-width: 42px; color: #50635d; font: 0.68rem "SFMono-Regular", Consolas, monospace; text-align: center; }
.flow-canvas-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.55rem; }
.flow-canvas-controls { position: static; z-index: auto; grid-row: 1; }
.flow-document-fields { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 0.55rem; }
.flow-document-fields .field { gap: 0.2rem; }
.flow-document-fields .field textarea { min-height: 38px; height: 38px; padding-block: 0.48rem; }
.flow-mode { padding: 0.38rem 0.58rem; border: 1px solid #c6d6ed; border-radius: 8px; color: #36537d; background: #edf3fc; font-size: 0.68rem; line-height: 1.35; }
.flow-mode[data-kind="link"] { color: #74470f; background: var(--amber-soft); border-color: #ebcd92; }
.flow-editor-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0.72rem; }
.flow-editor[data-inspector-mode="docked"][data-inspector-open="true"] .flow-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, 370px); }
.flow-canvas-shell { position: relative; grid-row: 2; min-width: 0; min-height: clamp(420px, 58vh, 780px); height: clamp(420px, 58vh, 780px); max-height: clamp(420px, 58vh, 780px); overflow: hidden; border-radius: 12px; isolation: isolate; }
.flow-svg-mount { width: 100%; height: 100%; overflow: auto; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: inherit; background: #f7f9f6; cursor: grab; touch-action: none; overscroll-behavior: contain; }
.flow-svg-mount.is-panning { cursor: grabbing; user-select: none; }
.flow-svg { display: block; max-width: none; overflow: visible; cursor: grab; touch-action: none; }
.flow-svg:focus-visible { outline: 3px solid rgb(49 96 167 / 0.34); outline-offset: -3px; }
.flow-svg-background { fill: #f7f9f6; }
.flow-group rect { fill: #eef3f1; fill-opacity: 0.66; stroke: #a8bbb5; stroke-width: 1.5; stroke-dasharray: 7 5; }
.flow-group-label { fill: #49645d; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.flow-arrow { fill: #52716a; }
.flow-edge { cursor: pointer; }
.flow-edge path { fill: none; stroke: #5f7f77; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.86; transition: stroke 130ms ease, stroke-width 130ms ease, opacity 130ms ease; }
.flow-edge path[data-edge-kind="backward"] { stroke-dasharray: 8 5; }
.flow-edge:hover path, .flow-edge:focus path, .flow-edge.is-selected path { stroke: var(--amber); stroke-width: 3.6; opacity: 1; }
.flow-edge-label { fill: #557068; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #f7f9f6; stroke-width: 5px; stroke-linejoin: round; }
.flow-edit-layer { pointer-events: none; }
.flow-edit-trigger { pointer-events: auto; cursor: pointer; outline: none; }
.flow-edit-trigger[hidden] { display: none; }
.flow-edit-trigger-hit-area { fill: transparent; pointer-events: all; }
.flow-edit-trigger-background { fill: #fffefa; stroke: #6f8e86; stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgb(17 37 31 / 0.2)); pointer-events: none; transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease; }
.flow-edit-trigger-glyph { fill: var(--green); pointer-events: none; }
.flow-edit-trigger:hover .flow-edit-trigger-background { fill: var(--green-soft); stroke: var(--green); stroke-width: 2; }
.flow-edit-trigger:focus-visible .flow-edit-trigger-background { fill: #fff; stroke: var(--blue); stroke-width: 3; }
.flow-reference-uri-trigger { pointer-events: auto; cursor: pointer; outline: none; }
.flow-reference-uri-trigger-hit-area { fill: transparent; pointer-events: all; }
.flow-reference-uri-trigger-background { fill: #fffefa; stroke: #6f8e86; stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgb(17 37 31 / 0.2)); pointer-events: none; transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease; }
.flow-reference-uri-trigger-glyph { fill: var(--green); pointer-events: none; }
.flow-reference-uri-trigger:hover .flow-reference-uri-trigger-background { fill: var(--green-soft); stroke: var(--green); stroke-width: 2; }
.flow-reference-uri-trigger:focus-visible .flow-reference-uri-trigger-background { fill: #fff; stroke: var(--blue); stroke-width: 3; }
.flow-node { --node-fill: #e5f2ed; --node-stroke: #4b8b7b; cursor: grab; touch-action: none; }
.flow-node:active { cursor: grabbing; }
.flow-node--start { --node-fill: #dcf4e7; --node-stroke: #27845f; }
.flow-node--end { --node-fill: #fbe4e1; --node-stroke: #b5544f; }
.flow-node--decision { --node-fill: #fff0c8; --node-stroke: #b68126; }
.flow-node--data { --node-fill: #eee7fb; --node-stroke: #7659a8; }
.flow-node--document { --node-fill: #e3edfb; --node-stroke: #4d74ad; }
.flow-node-shape { fill: var(--node-fill); stroke: var(--node-stroke); stroke-width: 2; transition: fill 130ms ease, stroke 130ms ease, filter 130ms ease; }
.flow-node-shape-secondary { fill: none; stroke: var(--node-stroke); stroke-width: 2; pointer-events: none; }
.flow-node:hover .flow-node-shape, .flow-node:focus .flow-node-shape { filter: drop-shadow(0 5px 5px rgb(21 107 93 / 0.15)); stroke-width: 3; }
.flow-node.is-selected .flow-node-shape { fill: #d9e7fa; stroke: var(--blue); stroke-width: 3; }
.flow-node.is-selected .flow-node-shape-secondary { stroke: var(--blue); stroke-width: 3; }
.flow-node.is-link-source .flow-node-shape { fill: #ffe6b4; stroke: var(--amber); stroke-width: 3; }
.flow-node.is-link-source .flow-node-shape-secondary { stroke: var(--amber); stroke-width: 3; }
.flow-node-caption { fill: #193e36; font-size: 16px; font-weight: 800; pointer-events: none; }
.flow-node-caption--reference { cursor: pointer; pointer-events: auto; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.flow-node-caption--reference:hover, .flow-node-caption--reference:focus-visible { fill: var(--blue); outline: none; }
.flow-node-id { fill: #608079; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; pointer-events: none; }
.flow-node-attachment-badge { pointer-events: none; }
.flow-node-attachment-badge rect { fill: #fffefa; stroke: #8dafaa; stroke-width: 1; }
.flow-node-attachment-badge-text { fill: #315f55; font-size: 10px; font-weight: 800; pointer-events: none; }
.flow-inspector { position: absolute; z-index: 3; top: 0; left: 0; width: 340px; height: 420px; min-width: min(300px, calc(100% - 24px)); min-height: min(260px, calc(100% - 24px)); display: grid; grid-template-rows: auto minmax(0, 1fr); box-sizing: border-box; overflow: hidden; border: 1px solid #a9bcb6; border-radius: 12px; color: var(--ink); background: var(--surface); box-shadow: 0 18px 48px rgb(17 37 31 / 0.24); }
.flow-inspector[hidden] { display: none; }
.flow-inspector.is-dragging, .flow-inspector.is-resizing { box-shadow: 0 22px 56px rgb(17 37 31 / 0.3); }
.flow-inspector h4 { margin: 0; color: #34433f; font-size: 0.9rem; }
.flow-inspector-header { min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.52rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); user-select: none; }
.flow-inspector-drag-handle { width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 8px; color: #61766f; background: transparent; cursor: move; touch-action: none; font-size: 1.15rem; }
.flow-inspector-drag-handle:hover { color: var(--green); background: var(--green-soft); }
.flow-inspector-drag-handle:focus-visible { outline: 3px solid rgb(21 107 93 / 0.2); outline-offset: -3px; }
.flow-inspector-heading-copy { min-width: 0; flex: 1; }
.flow-inspector-heading-copy .eyebrow { margin-bottom: 0.12rem; }
.flow-inspector-heading-copy h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-inspector-header .icon-button { flex: 0 0 auto; cursor: pointer; }
.flow-inspector-body { min-width: 0; min-height: 0; padding: 0.78rem; overflow: auto; overscroll-behavior: contain; }
.flow-inspector-body > div { display: grid; align-content: start; gap: 0.72rem; }
.flow-inspector-body > div[hidden] { display: none; }
.flow-inspector-resize-handle { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; border-radius: 10px 0 9px; cursor: nwse-resize; touch-action: none; }
.flow-inspector-resize-handle::before { content: ""; position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-right: 2px solid #6e827c; border-bottom: 2px solid #6e827c; }
.flow-inspector-resize-handle:focus-visible { outline: 3px solid rgb(21 107 93 / 0.24); outline-offset: -2px; }
.flow-inspector .field input, .flow-inspector .field textarea, .flow-inspector .field select { min-height: 36px; font-size: 0.74rem; }
.flow-inspector .field textarea { min-height: 84px; }
.inspector-dock { min-width: 0; min-height: 0; }
.inspector-dock[hidden] { display: none; }
.inspector-dock > .inspector-surface { width: 100%; height: 100%; }
.inspector-surface--docked { position: static; inset: auto; width: 100%; height: 100%; min-width: 0; min-height: 0; transform: none !important; box-shadow: 0 10px 28px rgb(17 37 31 / 0.12); }
.inspector-surface--docked .flow-inspector-drag-handle,
.inspector-surface--docked .flow-inspector-resize-handle { display: none; }
.inspector-surface--overlay { position: absolute; z-index: 3; top: 0; left: 0; width: 340px; height: 420px; min-width: min(300px, calc(100% - 24px)); min-height: min(260px, calc(100% - 24px)); box-shadow: 0 18px 48px rgb(17 37 31 / 0.24); }
.inspector-selection-empty { min-height: 200px; place-content: center; gap: 0.35rem; color: #536660; text-align: center; }
.inspector-selection-empty strong { font-size: 0.82rem; }
.inspector-selection-empty p { max-width: 28ch; margin: 0; color: var(--muted); font-size: 0.68rem; line-height: 1.55; }
.inspector-detached-status { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.62rem 0.72rem; border: 1px solid #a9bedc; border-radius: 10px; color: #294f88; background: #eef4fc; font-size: 0.7rem; }
.inspector-detached-status[hidden] { display: none; }
.flow-pin { display: flex; align-items: center; gap: 0.48rem; color: #465a55; font-size: 0.72rem; font-weight: 700; }
.flow-pin input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--green); }
.flow-node-attachments { display: grid; gap: 0.55rem; padding: 0.62rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.flow-node-attachments-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.flow-node-attachments-heading h5 { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.76rem; }
.flow-node-attachment-list { display: grid; gap: 0.4rem; }
.flow-node-attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; padding: 0.42rem; border-radius: 7px; background: var(--surface-soft); }
.flow-node-attachment-row > span:first-child { min-width: 0; display: grid; gap: 0.1rem; }
.flow-node-attachment-row strong, .flow-node-attachment-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node-attachment-row strong { font-size: 0.68rem; }
.flow-node-attachment-row small { color: var(--muted); font: 0.57rem "SFMono-Regular", Consolas, monospace; }
.flow-node-attachment-actions { display: flex; gap: 0.2rem; }
.flow-node-attachment-actions .icon-button { width: 28px; height: 28px; font-size: 0.72rem; }
.flow-node-attachment-empty { margin: 0; color: var(--muted); font-size: 0.65rem; line-height: 1.45; }

.graph-editor { display: grid; gap: 0.55rem; padding: 0.65rem 0.9rem 1rem; }
.graph-editor-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 0.78rem; border-bottom: 1px solid var(--line); }
.graph-editor-toolbar--compact { justify-content: flex-end; min-height: 0; padding-bottom: 0; border-bottom: 0; }
.graph-editor-toolbar h3 { margin: 0; font: 500 1.35rem Georgia, "Noto Serif TC", serif; }
.graph-editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.graph-help { max-width: 760px; margin: 0.38rem 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.6; }
.graph-document-fields { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 0.55rem; }
.graph-document-fields .field { gap: 0.2rem; }
.graph-document-fields .field textarea { min-height: 38px; height: 38px; padding-block: 0.48rem; }
.graph-mode { padding: 0.58rem 0.72rem; border: 1px solid #c6d6ed; border-radius: 9px; color: #36537d; background: #edf3fc; font-size: 0.72rem; line-height: 1.45; }
.graph-mode[data-kind="connect"] { color: #74470f; border-color: #ebcd92; background: var(--amber-soft); }
.graph-mode[data-kind="error"] { color: #812d35; border-color: #e1b4b9; background: var(--red-soft); }
.graph-editor-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0.72rem; }
.graph-editor[data-inspector-mode="docked"][data-inspector-open="true"] .graph-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, 370px); }
.flow-editor[data-inspector-mode="detached"] .flow-editor-grid { grid-template-columns: minmax(0, 1fr); }
.graph-canvas-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.55rem; }
.graph-canvas-controls { grid-row: 1; flex-wrap: wrap; }
.graph-layout-control { min-width: 0; display: flex; align-items: center; gap: 0.38rem; color: #50635d; font-size: 0.67rem; font-weight: 780; }
.graph-layout-control select { min-height: 32px; max-width: 220px; padding: 0.3rem 1.8rem 0.3rem 0.52rem; border: 1px solid var(--line); border-radius: 8px; color: #344a44; background: white; font: inherit; }
.graph-canvas-shell { position: relative; grid-row: 3; min-width: 0; min-height: clamp(420px, 58vh, 780px); height: clamp(420px, 58vh, 780px); max-height: clamp(420px, 58vh, 780px); overflow: hidden; border-radius: 12px; isolation: isolate; }
.graph-svg-mount { width: 100%; height: 100%; overflow: auto; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: inherit; background: #f7f9f6; cursor: grab; touch-action: none; overscroll-behavior: contain; }
.graph-svg-mount:focus-visible { outline: 3px solid rgb(49 96 167 / 0.34); outline-offset: -3px; }
.graph-svg-mount.is-panning { cursor: grabbing; user-select: none; }
.graph-svg { display: block; max-width: none; overflow: visible; cursor: grab; touch-action: none; }
.graph-svg-background { fill: #f7f9f6; }

.graph-group-shape, .graph-group > rect { fill: #eef3f1; fill-opacity: 0.66; stroke: #a8bbb5; stroke-width: 1.5; stroke-dasharray: 7 5; transition: fill 130ms ease, stroke 130ms ease; }
.graph-group-label { fill: #49645d; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; paint-order: stroke; stroke: #f7f9f6; stroke-width: 4px; }
.graph-group.is-selected .graph-group-shape, .graph-group.is-selected > rect { fill: #e3edf9; stroke: var(--blue); stroke-width: 2.5; }
.graph-arrow { fill: #52716a; }

.graph-edge { color: #5f7f77; cursor: pointer; outline: none; }
.graph-edge-hit { fill: none; stroke: transparent; stroke-width: 14px; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.graph-edge-path, .graph-edge > path:not(.graph-edge-hit) { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; transition: stroke 130ms ease, stroke-width 130ms ease, opacity 130ms ease; }
.graph-label-layer { pointer-events: none; }
.graph-edge-label { fill: #4e6c64; font-size: 12px; font-weight: 760; paint-order: stroke; stroke: #f7f9f6; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.graph-edge-label.is-selected { fill: var(--amber); }
.graph-edge[data-edge-kind="cause"] { color: #9a6130; }
.graph-edge[data-edge-kind="sequence"] { color: #476f9d; }
.graph-edge[data-edge-kind="association"] .graph-edge-path, .graph-edge[data-edge-kind="association"] > path:not(.graph-edge-hit) { stroke-dasharray: 6 5; }
.graph-edge:hover, .graph-edge:focus-visible, .graph-edge.is-selected { color: var(--amber); }
.graph-edge:hover .graph-edge-path, .graph-edge:focus-visible .graph-edge-path, .graph-edge.is-selected .graph-edge-path,
.graph-edge:hover > path:not(.graph-edge-hit), .graph-edge:focus-visible > path:not(.graph-edge-hit), .graph-edge.is-selected > path:not(.graph-edge-hit) { stroke-width: 3.6; opacity: 1; }

.graph-node { --graph-node-fill: #e5f2ed; --graph-node-stroke: #4b8b7b; cursor: grab; outline: none; touch-action: none; }
.graph-node:active { cursor: grabbing; }
.graph-node[data-node-kind="context"], .graph-node--context { --graph-node-fill: #f1eee5; --graph-node-stroke: #8a7a53; }
.graph-node[data-node-kind="event"], .graph-node--event { --graph-node-fill: #e3edfb; --graph-node-stroke: #4d74ad; }
.graph-node[data-node-kind="factor"], .graph-node--factor { --graph-node-fill: #eee7fb; --graph-node-stroke: #7659a8; }
.graph-node[data-node-kind="state"], .graph-node--state { --graph-node-fill: #e7f1f3; --graph-node-stroke: #4c7e87; }
.graph-node[data-node-kind="emotion"], .graph-node--emotion { --graph-node-fill: #f9e8ee; --graph-node-stroke: #aa5e78; }
.graph-node[data-node-kind="impulse"], .graph-node--impulse { --graph-node-fill: #fff0c8; --graph-node-stroke: #b68126; }
.graph-node[data-node-kind="decision"], .graph-node--decision { --graph-node-fill: #fff0c8; --graph-node-stroke: #b68126; }
.graph-node[data-node-kind="behavior"], .graph-node--behavior { --graph-node-fill: #e5f2ed; --graph-node-stroke: #3d8976; }
.graph-node[data-node-kind="outcome"], .graph-node--outcome { --graph-node-fill: #dcf4e7; --graph-node-stroke: #27845f; }
.graph-node[data-node-kind="risk"], .graph-node--risk { --graph-node-fill: #fbe4e1; --graph-node-stroke: #b5544f; }
.graph-reference-trigger { pointer-events: auto; cursor: pointer; outline: none; }
.graph-reference-trigger-hit-area { fill: transparent; pointer-events: all; }
.graph-reference-trigger-background { fill: #fffefa; stroke: #6f8e86; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgb(17 37 31 / 0.18)); pointer-events: none; transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease; }
.graph-reference-trigger-glyph { fill: var(--green); pointer-events: none; }
.graph-reference-trigger[data-reference-kind="uri"] .graph-reference-trigger-glyph { fill: var(--blue); }
.graph-reference-trigger:hover .graph-reference-trigger-background { fill: var(--green-soft); stroke: var(--green); stroke-width: 2; }
.graph-reference-trigger:focus-visible .graph-reference-trigger-background { fill: #fff; stroke: var(--blue); stroke-width: 3; }
.graph-edit-layer { pointer-events: none; }
.graph-edit-trigger { pointer-events: auto; cursor: pointer; outline: none; }
.graph-edit-trigger[hidden] { display: none; }
.graph-edit-trigger-hit-area { fill: transparent; pointer-events: all; }
.graph-edit-trigger-background { fill: #fffefa; stroke: #6f8e86; stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgb(17 37 31 / 0.2)); pointer-events: none; transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease; }
.graph-edit-trigger-glyph { fill: var(--green); pointer-events: none; }
.graph-edit-trigger:hover .graph-edit-trigger-background { fill: var(--green-soft); stroke: var(--green); stroke-width: 2; }
.graph-edit-trigger:focus-visible .graph-edit-trigger-background { fill: #fff; stroke: var(--blue); stroke-width: 3; }
.graph-node-shape { fill: var(--graph-node-fill); stroke: var(--graph-node-stroke); stroke-width: 2; transition: fill 130ms ease, stroke 130ms ease, filter 130ms ease; }
.graph-node-accent { fill: var(--graph-node-stroke); pointer-events: none; }
.graph-node:hover .graph-node-shape, .graph-node:focus-visible .graph-node-shape { filter: drop-shadow(0 5px 5px rgb(21 107 93 / 0.15)); stroke-width: 3; }
.graph-node.is-selected .graph-node-shape { fill: #d9e7fa; stroke: var(--blue); stroke-width: 3; }
.graph-node.is-link-source .graph-node-shape { fill: #ffe6b4; stroke: var(--amber); stroke-width: 3; }
.graph-node.is-connect-target .graph-node-shape { stroke: #3f79b4; stroke-width: 3; stroke-dasharray: 7 4; }
.graph-companion-banner {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px dashed #b7c3bd;
  border-radius: 9px;
  background: #f6f7f4;
  font-size: 0.76rem;
}
.graph-companion-label { color: #5d6f69; font-weight: 700; }
.graph-companion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.2rem 0.1rem 0.1rem;
  border: 1px solid #c8d4ce;
  border-radius: 999px;
  background: white;
}
.graph-companion-open {
  padding: 0.14rem 0.5rem;
  border: 0;
  border-radius: 999px;
  color: #2f4f47;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.graph-companion-open:hover, .graph-companion-open:focus-visible { color: var(--green-strong); background: var(--green-soft); outline: none; }
.graph-companion-remove {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #5d6f69;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.graph-companion-remove:hover, .graph-companion-remove:focus-visible { color: #922f38; background: #f4e4e5; outline: none; }

/* Companion elements belong to another document shown on the same canvas. */
.graph-node.is-companion .graph-node-shape { fill: #f6f7f4; stroke: #93a49e; stroke-dasharray: 6 4; }
.graph-node.is-companion .graph-node-accent { fill: #93a49e; }
.graph-node.is-companion .graph-node-title, .graph-node.is-companion .graph-node-kind { fill: #4d5c57; }
.graph-node.is-companion .graph-node-detail, .graph-node.is-companion .graph-node-id { fill: #7d8c86; }
.graph-edge.is-companion .graph-edge-path { stroke: #93a49e; stroke-dasharray: 7 5; }
.graph-edge.is-companion .graph-edge-label { fill: #7d8c86; }
.graph-node-kind { fill: var(--graph-node-stroke); font-size: 9.5px; font-weight: 820; letter-spacing: 0.07em; text-transform: uppercase; pointer-events: none; }
.graph-node-title { fill: #193e36; font-size: 15px; font-weight: 820; pointer-events: none; }
.graph-node-detail { fill: #4f6861; font-size: 11.5px; font-weight: 560; pointer-events: none; }
.graph-node-id { fill: #608079; font: 10px "SFMono-Regular", Consolas, monospace; pointer-events: none; }

.graph-inspector { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid #a9bcb6; border-radius: 12px; color: var(--ink); background: var(--surface); box-shadow: 0 10px 28px rgb(17 37 31 / 0.12); }
.graph-inspector[hidden] { display: none; }
.graph-inspector.is-dragging, .graph-inspector.is-resizing { box-shadow: 0 22px 56px rgb(17 37 31 / 0.3); }
.graph-inspector-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 58px; padding: 0.62rem 0.72rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.graph-inspector-header h4 { margin: 0; color: #34433f; font-size: 0.92rem; }
.graph-inspector-body { min-width: 0; min-height: 0; padding: 0.78rem; overflow: auto; overscroll-behavior: contain; }
.graph-inspector-empty { min-height: 220px; display: grid; place-content: center; gap: 0.35rem; padding: 1.2rem; color: #536660; text-align: center; }
.graph-inspector-empty strong { font-size: 0.82rem; }
.graph-inspector-empty p { max-width: 28ch; margin: 0; color: var(--muted); font-size: 0.68rem; line-height: 1.55; }
.graph-selection-form { display: grid; align-content: start; gap: 0.72rem; }
.graph-selection-heading h5 { margin: 0; color: #34433f; font-size: 0.86rem; }
.graph-selection-form .field input, .graph-selection-form .field textarea, .graph-selection-form .field select { min-height: 36px; font-size: 0.74rem; }
.graph-selection-form .field textarea { min-height: 96px; resize: vertical; }
.graph-pin { display: flex; align-items: center; gap: 0.48rem; color: #465a55; font-size: 0.72rem; font-weight: 700; }
.graph-pin input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--green); }
.graph-node-relations-panel { display: grid; gap: 0.48rem; padding: 0.62rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.graph-node-relations-heading { display: grid; gap: 0.12rem; }
.graph-node-relations-heading h6 { margin: 0; color: #34433f; font-size: 0.75rem; }
.graph-node-relations-heading small { color: var(--muted); font-size: 0.6rem; line-height: 1.4; }
.graph-node-relations { display: grid; gap: 0.34rem; }
.graph-node-relation { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.42rem 0.48rem; border: 1px solid transparent; border-radius: 7px; color: #405a53; background: var(--surface-soft); font-size: 0.66rem; text-align: left; }
.graph-node-relation:hover, .graph-node-relation:focus-visible { border-color: #a9c9bf; background: var(--green-soft); }
.graph-node-attachments { display: grid; gap: 0.55rem; padding: 0.62rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.graph-node-attachments-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.graph-node-attachments-heading h5 { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.76rem; }
.graph-node-attachment-list { display: grid; gap: 0.4rem; }
.graph-node-attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; padding: 0.42rem; border-radius: 7px; background: var(--surface-soft); }
.graph-node-attachment-row > span:first-child { min-width: 0; display: grid; gap: 0.1rem; }
.graph-node-attachment-row strong, .graph-node-attachment-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-node-attachment-row strong { font-size: 0.68rem; }
.graph-node-attachment-row small { color: var(--muted); font: 0.57rem "SFMono-Regular", Consolas, monospace; }
.graph-node-attachment-actions { display: flex; gap: 0.2rem; }
.graph-node-attachment-actions .icon-button { width: 28px; height: 28px; font-size: 0.72rem; }
.graph-node-attachment-empty { margin: 0; color: var(--muted); font-size: 0.65rem; line-height: 1.45; }
.graph-edge-endpoints { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.graph-edge-endpoints #graph-swap-edge { justify-self: center; }

.xml-inspector { margin: 0 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.xml-inspector summary { padding: 0.72rem 0.85rem; color: #4d5d58; background: var(--surface-soft); cursor: pointer; font-size: 0.73rem; font-weight: 780; }
.inspector-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--line); color: #687672; font-size: 0.65rem; }
.xml-inspector pre { max-height: 380px; margin: 0; padding: 0.9rem; overflow: auto; color: #d6ebe5; background: #142722; font-size: 0.68rem; line-height: 1.6; white-space: pre; }

.create-dialog { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: 0 30px 90px rgb(17 37 31 / 0.22); }
.create-dialog::backdrop { background: rgb(14 29 25 / 0.54); backdrop-filter: blur(4px); }
.create-dialog form { padding: 1.2rem; }
.attachment-dialog { width: min(980px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: 0 30px 90px rgb(17 37 31 / 0.24); }
.attachment-dialog::backdrop { background: rgb(14 29 25 / 0.58); backdrop-filter: blur(4px); }
.attachment-dialog-shell { max-height: calc(100vh - 2rem); display: grid; gap: 0.9rem; padding: 1.1rem; overflow: auto; }
.attachment-dialog-heading { margin-bottom: 0; }
.attachment-dialog-heading .dialog-note { margin-top: 0.3rem; }
.attachment-dialog-error { padding: 0.7rem; border: 1px solid #e1b4b9; border-radius: 9px; color: #812d35; background: var(--red-soft); font-size: 0.72rem; }
.attachment-owner-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.attachment-owner-facts > div { min-width: 0; display: grid; gap: 0.2rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.attachment-owner-facts span { color: var(--muted); font-size: 0.61rem; font-weight: 770; text-transform: uppercase; letter-spacing: 0.06em; }
.attachment-owner-facts strong { overflow: hidden; text-overflow: ellipsis; color: #34433f; font-size: 0.74rem; white-space: nowrap; }
.attachment-upload-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr) auto; align-items: end; gap: 0.7rem; padding: 0.8rem; border: 1px solid #acd9ce; border-radius: 11px; background: var(--green-soft); }
.attachment-upload-panel h3, .attachment-inventory-heading h3 { margin: 0; font-size: 0.82rem; }
.attachment-upload-panel p, .attachment-inventory-heading p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.65rem; line-height: 1.5; }
.attachment-file-picker { display: grid; gap: 0.28rem; color: #455852; font-size: 0.66rem; font-weight: 760; }
.attachment-file-picker input { min-width: 0; padding: 0.48rem; border: 1px solid #a9cfc5; border-radius: 8px; background: white; font-size: 0.68rem; }
.attachment-upload-status { grid-column: 1 / -1; min-height: 1.2rem; color: #35554d; font-size: 0.67rem; }
.attachment-upload-status[data-kind="error"] { color: var(--red); }
.attachment-inventory-section { display: grid; gap: 0.65rem; }
.attachment-inventory-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.attachment-search { width: 100%; min-width: 0; }
.attachment-inventory { display: grid; gap: 0.55rem; }
.attachment-inventory-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.attachment-inventory-card:focus { outline: 3px solid rgb(21 107 93 / 0.2); }
.attachment-inventory-preview { width: 76px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: #658078; background: #edf2ef; font: 700 0.64rem "SFMono-Regular", Consolas, monospace; }
.attachment-inventory-preview img { width: 100%; height: 100%; object-fit: cover; }
.attachment-inventory-copy { min-width: 0; display: grid; gap: 0.2rem; }
.attachment-inventory-name { min-width: 0; display: flex; align-items: center; gap: 0.45rem; }
.attachment-inventory-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
.attachment-inventory-copy p { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 0.62rem; line-height: 1.4; }
.attachment-inventory-copy .attachment-placement { color: #47665e; }
.attachment-inventory-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 0.35rem; max-width: 250px; }
.attachment-inventory-empty { padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: center; font-size: 0.72rem; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dialog-heading h2 { margin: 0; font: 500 1.6rem Georgia, "Noto Serif TC", serif; }
.type-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.48rem; margin: 0 0 0.9rem; padding: 0; border: 0; }
.type-picker legend { margin-bottom: 0.4rem; color: #566660; font-size: 0.7rem; font-weight: 760; }
.type-picker label { position: relative; min-width: 0; }
.type-picker input { position: absolute; opacity: 0; pointer-events: none; }
.type-picker span { min-height: 62px; display: grid; align-content: center; gap: 0.18rem; padding: 0.55rem 0.62rem; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.type-picker b { font-size: 0.73rem; }
.type-picker small { color: var(--muted); font-size: 0.62rem; }
.type-picker input:checked + span { border-color: var(--green); color: var(--green-strong); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.type-picker input:focus-visible + span { outline: 3px solid rgb(21 107 93 / 0.28); outline-offset: 2px; }
.type-picker[disabled] { opacity: 0.62; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.72rem; }
.dialog-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.66rem; line-height: 1.55; }
.create-type-policy-note { min-height: 1.1rem; margin: -0.35rem 0 0.8rem; }
.create-type-policy-note[data-kind="error"] { color: var(--red); font-weight: 720; }
.create-graph-preset { margin-bottom: 0.72rem; }
.create-graph-preset small { color: var(--muted); font-size: 0.64rem; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: end; gap: 0.55rem; margin-top: 1rem; }
.toast { position: fixed; z-index: 10; right: 1.2rem; bottom: 1.2rem; max-width: min(420px, calc(100vw - 2.4rem)); padding: 0.78rem 0.9rem; border: 1px solid #bad6ce; border-radius: 10px; color: #174b40; background: #e6f4ef; box-shadow: var(--shadow); font-size: 0.75rem; line-height: 1.5; }
.toast[data-kind="error"] { color: #812d35; background: var(--red-soft); border-color: #e1b4b9; }

@media (min-width: 761px) {
  #editor-workspace[data-document-type="flow"],
  #editor-workspace[data-document-type="graph"] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  #editor-workspace[data-document-type="flow"] > .flow-editor:not([hidden]),
  #editor-workspace[data-document-type="graph"] > .graph-editor:not([hidden]) {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  #editor-workspace[data-document-type="flow"] .flow-editor-grid,
  #editor-workspace[data-document-type="graph"] .graph-editor-grid {
    min-height: 420px;
    flex: 1 1 auto;
  }
  #editor-workspace[data-document-type="flow"] .flow-canvas-stage,
  #editor-workspace[data-document-type="graph"] .graph-canvas-stage {
    height: 100%;
  }
  #editor-workspace[data-document-type="flow"] .flow-canvas-shell,
  #editor-workspace[data-document-type="graph"] .graph-canvas-shell {
    height: 100%;
  }
}

@container editor-panel (max-width: 760px) {
  .editor-header { align-items: stretch; flex-direction: column; }
  .editor-actions { justify-content: start; flex-wrap: wrap; }
  .document-route-actions { flex-wrap: wrap; }
  .form-editor-grid[data-inspector-mode="docked"][data-inspector-open="true"] { grid-template-columns: 1fr; padding-right: 0; }
  .form-inspector.inspector-surface--docked { min-height: 260px; margin: 0 1.2rem 1.2rem; width: auto; height: auto; }
  .flow-editor-toolbar { align-items: stretch; flex-direction: column; }
  .flow-document-fields { grid-template-columns: 1fr; }
  .flow-canvas-shell { min-height: 360px; height: min(58vh, 620px); }
  .graph-editor-toolbar { align-items: stretch; flex-direction: column; }
  .flow-editor-grid, .graph-document-fields, .graph-editor-grid { grid-template-columns: 1fr !important; }
  .graph-canvas-shell { min-height: 380px; height: min(58vh, 620px); }
  .graph-inspector { max-height: min(560px, 72vh); }
  .work-plan-layout { grid-template-columns: 1fr; }
  .work-plan-sidebar { position: static; grid-row: 1; }
  .work-plan-step-heading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container editor-panel (max-width: 520px) {
  .editor-header, .editor-mount, .flow-editor, .graph-editor { padding-left: 0.78rem; padding-right: 0.78rem; }
  .form-binding-selection { grid-template-columns: 1fr; }
  .form-inspector.inspector-surface--docked { margin-inline: 0.78rem; }
  .orphan-xml-viewer { margin-left: 0.78rem; margin-right: 0.78rem; }
  .orphan-xml-heading { flex-direction: column; }
  .editor-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .document-route-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; padding: 0 0 0.62rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .visibility-control { grid-column: 1 / -1; }
  .visibility-control select { width: 100%; }
  .canvas-controls { flex-direction: column; align-items: stretch; }
  .canvas-control-row { width: 100%; }
  .canvas-control-row-primary { flex: 0 1 auto; }
  .canvas-control-row-secondary { width: auto; align-self: end; }
  .canvas-zoom-controls { width: auto; min-width: 0; flex: 1 1 230px; }
  .canvas-zoom-controls input[type="range"] { min-width: 70px; flex: 1; }
  .work-plan-step-relations { grid-template-columns: 1fr; }
  .work-plan-step { margin-left: 0; }
}

@media (max-width: 1180px) {
  .editor-actions { flex-wrap: wrap; justify-content: end; }
}

@media (hover: none) {
  .folder-edit-button { opacity: 1; pointer-events: auto; }
}

@media (pointer: coarse) {
  .button, .button.compact { min-height: 44px; }
  .icon-button { min-width: 44px; width: 44px; height: 44px; }
}

@media (max-width: 760px), (pointer: coarse) {
  .flow-svg-mount, .flow-svg,
  .graph-svg-mount, .graph-svg {
    touch-action: pan-y;
  }
  .flow-svg-mount, .graph-svg-mount {
    overflow-y: hidden;
    overscroll-behavior-y: auto;
  }
}

@media (max-width: 880px) {
  .editor-header { align-items: stretch; flex-direction: column; }
  .editor-actions { justify-content: start; }
  .document-route-actions { flex-wrap: wrap; }
  .editor-placeholder { min-height: 420px; }
  .flow-canvas-controls { align-items: stretch; }
  .flow-canvas-control-row { flex-wrap: wrap; }
  .flow-document-fields { grid-template-columns: 1fr; }
  .graph-document-fields, .graph-editor-grid { grid-template-columns: 1fr; }
  .graph-inspector { max-height: min(560px, 72vh); }
}

@media (max-width: 620px) {
  .app-header { padding: 0.7rem 0.75rem; }
  .auth-notice { align-items: stretch; flex-direction: column; padding: 0.7rem 0.75rem; }
  .auth-notice .button { align-self: start; }
  .brand small { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .editor-header, .editor-mount { padding-left: 0.78rem; padding-right: 0.78rem; }
  .document-route-actions { display: grid; grid-template-columns: 1fr; }
  .form-grid, .form-grid.three, .form-grid.folder-query-fields, .metadata-grid { grid-template-columns: 1fr; }
  .folder-allowed-document-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repeat-card, .repeat-card.two-fields { grid-template-columns: 1fr; }
  .relation-participant-fields { grid-template-columns: 1fr; }
  .relation-participant-reference { grid-column: 1; }
  .relation-compound-card { align-items: stretch; flex-direction: column; }
  .relation-compound-card-actions { justify-content: flex-end; }
  .relation-compound-participant-fields, .relation-compound-arc .form-grid { grid-template-columns: 1fr; }
  .relation-compound-dialog, .reference-editor-dialog {
    width: calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .relation-compound-dialog-shell, .reference-editor-dialog .reference-editor-body {
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(0.82rem + env(safe-area-inset-bottom, 0px));
  }
  .relation-compound-dialog-shell { padding-inline: max(0.78rem, env(safe-area-inset-left, 0px)) max(0.78rem, env(safe-area-inset-right, 0px)); }
  .relation-compound-dialog .dialog-actions {
    bottom: calc(-1rem - env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .repeat-actions { justify-self: end; }
  .attachment-summary, .dialog-grid { grid-template-columns: 1fr; }
  .type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-editor, .graph-editor { padding-left: 0.78rem; padding-right: 0.78rem; }
  .flow-canvas-shell { min-height: 300px; }
  .canvas-controls { flex-direction: column; align-items: stretch; }
  .canvas-control-row { width: 100%; }
  .canvas-control-row-primary { flex: 0 1 auto; }
  .canvas-control-row-secondary { width: auto; align-self: end; }
  .canvas-zoom-controls { width: auto; min-width: 0; flex: 1 1 255px; }
  .canvas-zoom-controls input[type="range"] { min-width: 70px; flex: 1; }
  .graph-canvas-shell { min-height: 340px; height: min(58vh, 520px); }
  .graph-inspector { max-height: none; }
  .create-dialog form { padding: 0.9rem; }
  .attachment-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
  .attachment-dialog-shell { max-height: calc(100vh - 1rem); padding: 0.78rem; }
  .attachment-owner-facts, .attachment-upload-panel { grid-template-columns: 1fr; }
  .attachment-inventory-card { grid-template-columns: 56px minmax(0, 1fr); }
  .attachment-inventory-preview { width: 56px; height: 48px; }
  .attachment-inventory-actions { grid-column: 1 / -1; max-width: none; justify-content: start; }
  .reference-editor, .xml-inspector, .orphan-xml-viewer { margin-left: 0.78rem; margin-right: 0.78rem; }
  .reference-grid { grid-template-columns: 1fr; }
}

body.editor-fullscreen { overflow: hidden; }
body.editor-fullscreen .app-header,
body.editor-fullscreen .auth-notice { display: none; }
.workspace-shell.is-editor-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
}
.workspace-shell.is-editor-fullscreen > .navigation-rail { display: none; }
.workspace-shell.is-editor-fullscreen > .editor-panel {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.workspace-shell.is-editor-fullscreen #editor-workspace {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.workspace-shell.is-editor-fullscreen .editor-header,
.workspace-shell.is-editor-fullscreen .conflict-banner,
.workspace-shell.is-editor-fullscreen .readonly-banner { flex: 0 0 auto; }
.workspace-shell.is-editor-fullscreen .editor-mount:not([hidden]) {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}
.workspace-shell.is-editor-fullscreen .flow-editor:not([hidden]) {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
}
.workspace-shell.is-editor-fullscreen .graph-editor:not([hidden]) {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
}
.workspace-shell.is-editor-fullscreen .orphan-xml-viewer:not([hidden]) {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}
.workspace-shell.is-editor-fullscreen .orphan-xml-code { min-height: 0; max-height: none; }
.workspace-shell.is-editor-fullscreen .flow-editor-grid,
.workspace-shell.is-editor-fullscreen .graph-editor-grid {
  min-height: 0;
  flex: 1 1 auto;
}
.workspace-shell.is-editor-fullscreen .flow-canvas-stage,
.workspace-shell.is-editor-fullscreen .graph-canvas-stage {
  min-height: 0;
  height: 100%;
}
.workspace-shell.is-editor-fullscreen .flow-canvas-shell,
.workspace-shell.is-editor-fullscreen .graph-canvas-shell {
  min-height: 0;
  height: 100%;
  max-height: none;
}
.workspace-shell.is-editor-fullscreen .graph-inspector { min-height: 0; max-height: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}