.genogram-page { color: var(--ui-white); }
.genogram-page *, .genogram-page *::before, .genogram-page *::after { box-sizing: border-box; }
.genogram-workspace { margin-left: var(--database-sidebar-width); padding: calc(var(--database-header-height) + 16px) 22px 22px; min-width: 0; }
.genogram-workspace button, #saved-dialog button { border: 1px solid var(--ui-line); border-radius: 4px; padding: 7px 11px; color: #fff; background: var(--ui-navy); font: 600 11px var(--body-font); cursor: pointer; }
.genogram-workspace button:hover, #saved-dialog button:hover { border-color: var(--ui-blue); background: var(--ui-slate); }
.genogram-workspace button:disabled { opacity: .4; cursor: default; }
.genogram-workspace button:focus-visible, .genogram-workspace input:focus-visible, .genogram-workspace select:focus-visible, .genogram-workspace textarea:focus-visible, #genogram-canvas:focus-visible { outline: 2px solid #80c5ff; outline-offset: 2px; }
.genogram-workspace .primary, .genogram-workspace button[aria-pressed="true"] { border-color: var(--ui-blue); background: var(--ui-blue); color: #fff; }
.genogram-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-carbon); }
.genogram-toolbar .toolbar-group { display: flex; flex-wrap: wrap; gap: 3px; padding-right: 7px; border-right: 1px solid var(--ui-line); }
.genogram-toolbar .toolbar-group:last-child { border: 0; }
.genogram-toolbar button { font-size: 10px; padding: 6px 8px; }
.genogram-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 25px 0 20px; }
.genogram-eyebrow { margin: 0 0 7px; font-size: 9px; font-weight: 700; letter-spacing: .16em; color: #83b4df; }
.genogram-heading h2 { margin: 0; color: var(--ui-blue); font: 700 27px var(--display-font); letter-spacing: .08em; }
.genogram-heading p:not(.genogram-eyebrow) { margin: 7px 0 0; font-size: 12px; color: #c2cdd7; line-height: 1.5; }
.genogram-heading .storage-note { font-size: 10px!important; text-align: right; }
.genogram-document { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 14px; background: var(--ui-navy); border: 1px solid var(--ui-blue); border-bottom: 0; border-radius: 6px 6px 0 0; }
.document-title { display: grid; gap: 4px; color: #9cb9d2; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; min-width: 160px; flex: 1; max-width: 350px; }
.document-title input { border: 0; border-bottom: 1px solid var(--ui-line); padding: 3px 0; font: 600 17px var(--body-font); color: #fff; background: transparent; width: 100%; }
.document-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.genogram-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 14px; }
.genogram-board { border: 1px solid var(--ui-blue); min-width: 0; border-radius: 0 0 6px 6px; overflow: hidden; background: #fff; box-shadow: 0 8px 28px #0003; }
.canvas-toolbar, .canvas-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 11px; color: #b5cadd; background: var(--ui-carbon); font-size: 10px; }
.canvas-toolbar > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.canvas-toolbar button { padding: 3px 9px; }
.canvas-toolbar label { display: flex; align-items: center; gap: 3px; margin-right: 8px; }
.canvas-toolbar output { min-width: 38px; text-align: center; }
.canvas-viewport { position: relative; height: min(70vh, 780px); min-height: 480px; background: #fff; }
#genogram-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#genogram-canvas.is-connecting { cursor: crosshair; }
#genogram-canvas:active { cursor: grabbing; }
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px; text-align: center; color: #172635; pointer-events: none; }
.canvas-empty[hidden] { display: none; }
.canvas-empty button { pointer-events: auto; margin-top: 10px; }
.canvas-empty h3 { margin: 16px 0 5px; font: 600 21px var(--display-font); }
.canvas-empty p { font-size: 12px; color: #5c6c79; }
.empty-symbols { font: 40px Georgia, serif; color: var(--ui-blue); letter-spacing: 5px; }
.canvas-empty .text-button { color: #2d6d9f; background: transparent; border-color: transparent; font-size: 11px; }
.genogram-inspector { display: grid; gap: 10px; padding-top: 12px; }
.inspector-panel { margin: 0; padding: 13px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-navy); }
.inspector-panel h3, .inspector-panel summary { margin: -13px -13px 12px; padding: 10px 12px; border-bottom: 1px solid var(--ui-line); color: #9ccaf0; font: 700 12px var(--display-font); letter-spacing: .09em; background: #142c40; border-radius: 6px 6px 0 0; }
.inspector-panel summary { cursor: pointer; }
details.inspector-panel:not([open]) summary { margin-bottom: -13px; border-bottom: 0; border-radius: 6px; }
.inspector-panel form, .inspector-panel label { display: grid; gap: 6px; }
.inspector-panel form { gap: 12px; }
.inspector-panel form[hidden], .inspector-panel label[hidden] { display: none; }
.inspector-panel label { color: #c7d7e4; font-size: 11px; }
.inspector-panel input:not([type="checkbox"]), .inspector-panel select, .inspector-panel textarea { width: 100%; min-width: 0; border: 1px solid var(--ui-line); border-radius: 4px; background: var(--ui-slate); color: #fff; padding: 7px; font: 12px var(--body-font); }
.inspector-panel textarea { resize: vertical; }
.inspector-panel input[type="color"] { height: 32px; padding: 3px; }
.inspector-panel input[type="checkbox"], #snap-grid { accent-color: var(--ui-blue); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inspector-panel .check-field { display: flex; align-items: center; gap: 7px; }
.inspector-actions { display: flex; gap: 5px; justify-content: space-between; }
.genogram-workspace .danger { color: #ffadb4; }
.helper, .legend p { color: #adc0d0; font-size: 11px; line-height: 1.55; }
.helper:first-child { margin-top: 0; }
.connection-panel > button { width: 100%; }
.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.legend-lines { display: grid; gap: 7px; font-size: 10px; }
.legend-lines span { display: flex; align-items: center; gap: 9px; }
.legend-lines i { display: inline-block; width: 27px; border-top: 2px solid #afcde4; }
.legend-lines i.dashed { border-top-style: dashed; }.legend-lines i.dotted { border-top-style: dotted; }.legend-lines i.conflict { border-color: #e76b67; }
#genogram-status { min-height: 1.5em; font-size: 12px; color: #a7d3f7; margin: 12px 0 4px; }
.keyboard-hint { color: #92a6b8; font-size: 10px; }
#saved-dialog { width: min(500px, 90vw); max-height: 80vh; overflow: auto; border: 1px solid var(--ui-blue); border-radius: 8px; background: var(--ui-navy); color: #fff; padding: 22px; font: 13px var(--body-font); }
#saved-dialog::backdrop { background: #0009; }
#saved-dialog h2 { color: #9ccaf0; font: 600 19px var(--display-font); }
#saved-list { display: grid; gap: 7px; margin: 20px 0; }
#saved-list button { text-align: left; padding: 12px; }
.genogram-view-mode .genogram-inspector { display: none; }.genogram-view-mode .genogram-layout { grid-template-columns: minmax(0, 1fr); }
body.genogram-page.database-navigation-collapsed .genogram-workspace { margin-left: var(--database-sidebar-collapsed-width); padding-left: 16px; }
@media(max-width: 1100px) { .genogram-workspace { padding-right: 14px; padding-left: 14px; }.genogram-layout { grid-template-columns: minmax(0,1fr) 225px; }.genogram-heading .storage-note { display: none; } }
@media(max-width: 800px) { .genogram-layout { grid-template-columns: minmax(0,1fr); }.genogram-inspector { grid-template-columns: repeat(2,minmax(0,1fr)); }.genogram-heading h2 { font-size: 22px; }.canvas-viewport { min-height: 400px; height: 60vh; }.genogram-page { --database-sidebar-width: 150px; --database-brand-width: 150px; }.database-header h1 { font-size: 13px; }.database-sidebar h2 { font-size: 14px; } }
@media(max-width: 540px) { .genogram-page { --database-sidebar-width: 120px; --database-brand-width: 120px; }.genogram-workspace { padding-left: 8px; padding-right: 8px; }.genogram-inspector { grid-template-columns: 1fr; }.database-header h1 { font-size: 11px; letter-spacing: .03em; }.database-sidebar nav a { font-size: 10px; }.genogram-toolbar button { font-size: 9px; }.canvas-viewport { min-height: 340px; }.genogram-heading h2 { font-size: 19px; }.genogram-heading p:not(.genogram-eyebrow) { font-size: 10px; } }
@media print { @page { size: landscape; margin: 12mm; } .database-header,.database-sidebar,.genogram-toolbar,.genogram-document,.genogram-inspector,.canvas-toolbar,.canvas-footer,.keyboard-hint,#genogram-status,.storage-note { display: none!important; }.genogram-workspace { margin: 0!important; padding: 0!important; }.genogram-layout { display: block; }.genogram-heading { margin: 0 0 12px; }.genogram-heading h2 { color: #162a3a; }.genogram-eyebrow,.genogram-heading p { display: none; }.genogram-board { border: 0; box-shadow: none; }.canvas-viewport { height: 160mm; min-height: 0; }#canvas-grid { display: none; }body { background: white; } }