/* ============================================================
   ARCHITECTURE — ERD + schema reference
   ============================================================ */

.erd-wrap {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-2); overflow: auto; position: relative;
}
.erd-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 32px 32px; opacity: .35;
}
.erd { display: block; min-width: 1240px; position: relative; }

.erd__box rect { transition: stroke var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.erd__box { cursor: pointer; }
.erd__box:hover rect.bg, .erd__box[data-on="true"] rect.bg { stroke: var(--ink); stroke-width: 2; }
.erd__box.dim { opacity: .28; }
.erd__t { font-family: var(--font-ui); font-size: 12px; font-weight: 700; fill: var(--ink); }
.erd__f { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-2); }
.erd__k { font-family: var(--font-mono); font-size: 8px; fill: var(--signal); font-weight: 700; }
.erd__edge { stroke: var(--rule-2); stroke-width: 1.4; fill: none; transition: stroke var(--dur-2) var(--ease-out), stroke-width var(--dur-2) var(--ease-out); }
.erd__edge.on { stroke: var(--signal); stroke-width: 2.2; }
.erd__edge.dim { opacity: .18; }
.erd__el { font-family: var(--font-ui); font-size: 8.5px; fill: var(--ink-3); }

.erd-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--t-xs); }
.erd-key { display: inline-flex; align-items: center; gap: 6px; }
.erd-key__dot { width: 10px; height: 10px; border-radius: 2px; }

/* table reference */
.tbl-card { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); overflow: hidden; margin-block-end: var(--sp-3); }
.tbl-card__h { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper-3); cursor: pointer; }
.tbl-card__h h3 { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; }
.tbl-card[data-open="false"] .tbl-card__b { display: none; }
.tbl-card__b { padding: 0; }
.fld { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 90px; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-block-start: 1px solid var(--rule); font-size: var(--t-xs); align-items: center; }
.fld__n { font-family: var(--font-mono); color: var(--ink); word-break: break-word; }
.fld__t { color: var(--ink-3); font-size: var(--t-2xs); }
.fld__k { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fld__k[data-k="PK"]     { color: var(--brand-2); }
.fld__k[data-k="FK"]     { color: var(--info); }
.fld__k[data-k="UNIQUE"] { color: var(--signal); }

/* permission matrix */
.perm td:not(:first-child) { text-align: center; font-size: var(--t-2xs); }
.perm th:not(:first-child) { text-align: center; }
.perm .p-none { color: var(--ink-3); opacity: .5; }
.perm .p-read { color: var(--info); }
.perm .p-edit { color: var(--brand-2); font-weight: 600; }
.perm .p-full { color: var(--signal); font-weight: 700; }

/* ============================================================
   WORKFLOW DIAGRAMS
   ============================================================ */
.flow-wrap { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); overflow: auto; }
.flow-svg { display: block; }
.fnode rect, .fnode polygon, .fnode ellipse { transition: filter var(--dur-2) var(--ease-out); }
.fnode__t { font-family: var(--font-ui); font-size: 11px; font-weight: 600; fill: var(--ink); }
.fnode__s { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }
.fedge { stroke: var(--rule-2); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
.fedge--yes { stroke: var(--ok); }
.fedge--no  { stroke: var(--warn); }
.fedge__l { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); font-weight: 700; }

/* workflow catalogue */
.wf { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); overflow: hidden; }
.wf__h { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-block-end: 1px solid var(--rule); }
.wf__h h3 { font-size: var(--t-h4); }
.wf__steps { list-style: none; padding: 0; counter-reset: s; }
.wf__steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--rule); font-size: var(--t-sm);
}
.wf__steps li:last-child { border: 0; }
.wf__steps li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--signal); font-weight: 700; padding-block-start: 3px;
}
.wf__steps code { font-family: var(--font-mono); font-size: .82em; background: var(--paper-3); padding: 1px 5px; border-radius: var(--r-xs); }
.wf__meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--paper-3); font-size: var(--t-xs); color: var(--ink-3); }
.wf__meta b { color: var(--ink-2); font-weight: 600; }

/* diagnosis */
.diag { counter-reset: d; }
.diag__item { display: grid; grid-template-columns: 46px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-block-end: 1px solid var(--rule); }
.diag__item:last-child { border: 0; }
.diag__n {
  counter-increment: d; font-family: var(--font-display); font-size: 1.75rem;
  letter-spacing: -0.03em; line-height: 1; color: var(--rule-2);
}
.diag__item[data-top] .diag__n { color: var(--signal); }
.diag__t { font-weight: 600; font-size: var(--t-h4); margin-block-end: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.diag__b { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 74ch; }
.diag__b code { font-family: var(--font-mono); font-size: .85em; background: var(--paper-3); padding: 1px 5px; border-radius: var(--r-xs); }
.diag__fix { margin-block-start: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--brand-tint); border-radius: var(--r-sm); font-size: var(--t-sm); line-height: 1.55; border-inline-start: 3px solid var(--brand); }
:root[data-theme="dark"] .diag__fix { color: var(--ink); }