.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; } }

/* Standalone defaults also work when the editor is embedded in a wider site. */
.genogram-page { --ui-white: #eff8f6; --ui-line: #514d70; --ui-navy: #1c1b2b; --ui-carbon: #13131d; --ui-slate: #29273d; --ui-blue: #8063cf; --ui-mint: #70d9bd; --ui-purple: #a98de5; --body-font: system-ui, -apple-system, "Segoe UI", sans-serif; --display-font: var(--body-font); background: radial-gradient(circle at -5% -12%, #1d3a34 0, transparent 38%), radial-gradient(circle at 105% -10%, #271f3f 0, transparent 38%), radial-gradient(circle at 50% 116%, #17352e 0, transparent 35%), #090b10; min-height: 100vh; margin: 0; font-family: var(--body-font); }
.genogram-workspace { margin-left: 0; padding: clamp(16px, 3vw, 36px); max-width: 1800px; margin-inline: auto; }
.genogram-heading { margin: 22px 0; }
.genogram-heading h1 { margin: 0; color: #f2f8fc; font-size: clamp(25px, 3vw, 38px); line-height: 1.15; letter-spacing: -.025em; }
.genogram-heading p:not(.genogram-eyebrow) { font-size: 13px; }
.genogram-toolbar, .genogram-document, .inspector-panel, .genogram-board { box-shadow: 0 10px 30px #07101944; }
.genogram-toolbar { border-radius: 12px; border-top: 2px solid var(--ui-mint); padding: 10px; gap: 10px; }
.genogram-workspace button, #saved-dialog button { border-radius: 7px; font-size: 11px; padding: 8px 11px; transition: background .15s, border-color .15s; }
.genogram-document { border-radius: 12px 12px 0 0; }
.genogram-layout { grid-template-columns: minmax(0, 1fr) clamp(270px, 23vw, 340px); gap: 16px; }
.genogram-board { background: #13131e; border-color: #655b82; border-radius: 0 0 12px 12px; }
.canvas-viewport { background: radial-gradient(circle at -5% 112%, #18332d 0, transparent 34%), radial-gradient(circle at 105% -12%, #251e38 0, transparent 38%), #101116; height: min(68vh, 800px); min-height: 470px; }
.canvas-empty { color: #e9f3fb; }
.canvas-empty h2 { margin: 16px 0 5px; font-size: 22px; }
.canvas-empty p { color: #b7c9d7; }
.inspector-panel { border-radius: 10px; }
.inspector-panel h2 { margin: -13px -13px 12px; padding: 12px 14px; border-bottom: 1px solid var(--ui-line); color: var(--ui-mint); font-size: 12px; letter-spacing: .09em; background: #242138; border-radius: 10px 10px 0 0; }
.inspector-panel summary { background: #242138; }
.genogram-eyebrow, .inspector-panel summary, #saved-dialog h2, #genogram-status { color: var(--ui-mint); }
.genogram-heading h1 { background: linear-gradient(100deg, #f1faf5 5%, #b5e8d8 52%, #c2b0ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.genogram-document { border-color: #7966ae; background: linear-gradient(115deg, #1c1b2b, #26223b); }
.genogram-workspace button:hover, #saved-dialog button:hover { border-color: var(--ui-mint); color: #eafff6; }
.genogram-workspace .primary { background: #6953ac; border-color: #ac94e4; }
.genogram-workspace button[aria-pressed="true"] { background: #57448e; border-color: var(--ui-mint); }
.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-color: var(--ui-mint); }
.inspector-panel input[type="checkbox"], #snap-grid, #show-relationship-labels { accent-color: var(--ui-mint); }
.empty-symbols, .canvas-empty .text-button, .canvas-footer { color: var(--ui-mint); }
.legend-lines i { border-color: var(--ui-mint); }
.inspector-panel select[multiple] { min-height: 105px; }
.person-card { cursor: move; }
.person-card [data-person-part] { cursor: pointer; }
.card-port, .card-port-hit, .connector-junction { cursor: crosshair; }
.card-port-hit:hover, .connector-junction:hover, .card-port-hit.drop-target, .connector-junction.drop-target { fill: transparent; stroke: none; filter: none; }
.port-ring:has(+ .card-port + .card-port-hit:hover), .port-ring:has(+ .card-port + .card-port-hit.drop-target) { stroke: #70d9bd; stroke-width: 2.5; filter: none; }
.junction-port:has(> .connector-junction:hover) .junction-marker, .junction-port:has(> .connector-junction.drop-target) .junction-marker { r: 11px; fill: #242234; stroke: #70d9bd; stroke-width: 1.5px; filter: none; }
.junction-port:has(> .connector-junction:hover) .junction-core, .junction-port:has(> .connector-junction.drop-target) .junction-core { r: 5.5px; }
.junction-marker { transition: r .12s ease, fill .12s ease; }
.junction-core { transition: r .12s ease; }
.inline-card-input { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1.5px solid #70d9bd; border-radius: 6px; outline: none; background: #242234; color: #eff8f6; text-align: center; font-family: Arial, sans-serif; font-weight: 600; }
.family-junction .junction-hit, .parent-bar-hit, .partner-bar-hit { cursor: ns-resize; }
#parent-kind-dialog { width: min(420px, 90vw); border: 1px solid var(--ui-purple); border-radius: 12px; padding: 22px; background: #1c1b2b; color: var(--ui-white); font: 13px var(--body-font); box-shadow: 0 20px 60px #0009; }
#parent-kind-dialog::backdrop { background: #000b; }
#parent-kind-dialog h2 { margin-top: 0; color: var(--ui-mint); font-size: 19px; }
#parent-kind-dialog p { line-height: 1.5; }
#parent-kind-dialog label { display: grid; gap: 8px; }
#parent-kind-dialog select { width: 100%; padding: 9px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-slate); color: var(--ui-white); }
#parent-kind-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
#parent-kind-dialog button { border: 1px solid var(--ui-line); border-radius: 7px; padding: 8px 12px; background: var(--ui-slate); color: var(--ui-white); cursor: pointer; }
#parent-kind-dialog button.primary { background: #6953ac; border-color: var(--ui-purple); }
#parent-kind-dialog button:hover { border-color: var(--ui-mint); }
.relationship-color-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; width: 100%; padding: 4px 0; }
.relationship-color-strip[hidden] { display: none; }
.relationship-color-strip label { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap; }
.relationship-color-strip input { width: 28px; height: 24px; border: 0; padding: 1px; background: transparent; }
.relationship { cursor: pointer; }
.genogram-view-mode .port-ring, .genogram-view-mode .card-port, .genogram-view-mode .card-port-hit { display: none; }
.genogram-view-mode .genogram-layout { grid-template-columns: minmax(0, 1fr); }
@media(max-width: 1050px) { .genogram-layout { grid-template-columns: minmax(0,1fr) 260px; } }
@media(max-width: 800px) { .genogram-layout { grid-template-columns: 1fr; } .genogram-inspector { grid-template-columns: repeat(2,minmax(0,1fr)); } .genogram-workspace { padding: 14px; } }
@media(max-width: 540px) { .genogram-inspector { grid-template-columns: 1fr; } .genogram-toolbar .toolbar-group { border: 0; } .canvas-viewport { min-height: 380px; } }
@media print { .genogram-page { background: white; } .genogram-heading h1 { color: #17232f; } .canvas-viewport { background: white; } .person-card .port-ring, .person-card .card-port, .person-card .card-port-hit { display: none; } }

/* Keep the drawing surface and detail editor inside the browser viewport. */
.genogram-page { overflow: hidden; }
.genogram-workspace { width: 100%; max-width: 1800px; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 14px; }
.genogram-heading { flex: 0 0 auto; margin: 0 0 8px; }
.genogram-heading { margin-bottom: 16px; }
.genogram-heading h1 { font-size: clamp(23px, 2.2vw, 30px); }
.genogram-heading p:not(.genogram-eyebrow) { margin-top: 3px; }
.login-area { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.login-area form { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.login-area form[hidden] { display: none; }
.login-area input { width: 125px; min-width: 0; padding: 7px 8px; border: 1px solid #514d70; border-radius: 6px; color: #eff8f6; background: #1c1b2b; font: 11px var(--body-font); }
.login-area button { white-space: nowrap; }
.profile-link { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid #70d9bd; border-radius: 22px; color: #eff8f6; background: #242138; font-size: 12px; font-weight: 700; text-decoration: none; }
.profile-link[hidden] { display: none; }
.profile-link:hover { background: #3a3156; }
.profile-avatar { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #1a2430; background: #70d9bd; }
.genogram-document { display: block; flex: 0 0 auto; padding: 0; border: 0; border-bottom: 1px solid #514d70; border-radius: 11px 11px 0 0; }
.genogram-toolbar { border: 0; border-top: 2px solid var(--ui-mint); border-bottom: 1px solid #514d70; border-radius: 11px 11px 0 0; box-shadow: none; padding: 7px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.genogram-toolbar .toolbar-group { flex: 0 0 auto; flex-wrap: nowrap; }
.document-header { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 61px; padding: 7px 12px; }
.document-title { position: absolute; left: 50%; transform: translateX(-50%); min-width: 0; width: min(290px, 26vw); max-width: none; text-align: center; }
.document-title input { border: 0; padding: 2px 0; text-align: center; outline-offset: 2px; }
.document-tools { align-items: center; justify-content: flex-end; flex-wrap: nowrap; margin-left: auto; }
.genogram-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.genogram-board { display: flex; flex-direction: column; min-height: 0; border-radius: 12px; overflow: visible; }
.canvas-toolbar, .canvas-footer { flex: 0 0 auto; }
.canvas-toolbar { position: relative; z-index: 5; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; padding: 6px 10px; }
.canvas-toolbar-top, .canvas-toolbar-controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
.canvas-toolbar-top { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.canvas-toolbar-controls { flex: 0 0 auto; }
.canvas-toolbar-controls #zoom-in, .canvas-toolbar-controls #zoom-out, .canvas-toolbar-controls #fit-diagram { padding: 2px 6px; font-size: 10px; min-height: 22px; }
#diagram-count { flex: 0 0 auto; white-space: nowrap; line-height: 1.4; }
.canvas-key-strip { display: flex; flex: 1 1 610px; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.compact-key { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px; font-size: 10px; line-height: 1.5; }
.compact-key span { white-space: nowrap; }
.key-line { display: inline-block; width: 28px; height: 2px; margin-right: 3px; vertical-align: middle; background-repeat: repeat-x; }
.key-line[data-kind="parent"] { background-color: var(--key-color,#70d9bd); }
.key-line[data-kind="adoptive"] { background-image: repeating-linear-gradient(to right, var(--key-color,#70d9bd) 0 12px, transparent 12px 16px); }
.key-line[data-kind="step"] { background-image: repeating-linear-gradient(to right, var(--key-color,#70d9bd) 0 10px, transparent 10px 13px, var(--key-color,#70d9bd) 13px 15px, transparent 15px 18px); }
.key-line[data-kind="foster"] { background-image: repeating-linear-gradient(to right, var(--key-color,#70d9bd) 0 2px, transparent 2px 6px); }
.key-line[data-kind="alleged"] { background-image: repeating-linear-gradient(to right, var(--key-color,#70d9bd) 0 1px, transparent 1px 8px); }
.key-line[data-kind="surrendered"] { background-image: repeating-linear-gradient(to right, var(--key-color,#70d9bd) 0 1px, transparent 1px 10px); }
.relationship-key[data-mode="color"] .key-line { background-image: none; }
.gender-colors { color: #aebecb; }
.gender-colors i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 3px; }
.gender-colors .male { background: #61adf0; }.gender-colors .female { background: #59c69f; }.gender-colors .nonbinary { background: #ac8bf2; }
.key-mode { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.key-mode button { padding: 3px 6px; font-size: 10px; white-space: nowrap; }
.key-mode button[aria-pressed="true"] { border-color: #70d9bd; background: #57448e; }
.canvas-footer #diagram-count { color: #b8e7d7; }
.visually-hidden { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.family-edge-list { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; }
.family-edge-list button { text-align: left; white-space: normal; }
.canvas-viewport { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; }
.canvas-footer { border-radius: 0 0 11px 11px; }
.genogram-inspector { min-height: 0; overflow-y: auto; align-content: start; padding-top: 0; padding-right: 3px; scrollbar-color: #665b81 #13131e; }
#genogram-status { flex: 0 0 auto; min-height: 1.2em; margin: 5px 0 0; }
.keyboard-hint { flex: 0 0 auto; margin: 3px 0 0; }
@media (max-width: 1450px) {
    .document-header { display: grid; justify-content: stretch; gap: 6px; }
    .document-title { position: static; transform: none; width: min(320px, 100%); justify-self: center; }
    .document-tools { justify-self: end; margin-left: 0; }
}
@media (max-width: 800px) {
    .genogram-page { overflow: auto; }
    .genogram-workspace { height: auto; min-height: 100dvh; overflow: visible; }
    .genogram-layout { flex: none; }
    .canvas-viewport { height: 60dvh; min-height: 360px; }
    .genogram-inspector { overflow: visible; }
    .document-tools { flex-wrap: wrap; justify-content: center; justify-self: center; }
    .canvas-toolbar { flex-wrap: wrap; }
    .canvas-toolbar-leading { flex-wrap: wrap; }
}
@media print {
    .genogram-page, .genogram-workspace { height: auto; min-height: 0; overflow: visible; }
    .login-area { display: none; }
    .genogram-layout { display: block; }
    .canvas-viewport { height: 160mm; }
}
.profile-page { overflow: auto; }
.profile-page [hidden] { display: none; }
.profile-workspace { max-width: 1120px; min-height: 100dvh; margin: auto; padding: 30px 20px; }
.profile-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.profile-header h1 { display: flex; align-items: center; gap: 12px; margin: 0; color: #d9c7ff; font-size: clamp(25px, 3vw, 38px); }
.profile-header .profile-avatar { width: 36px; height: 36px; flex: 0 0 auto; }
.profile-header p:not(.genogram-eyebrow) { color: #b7c9d7; }
.profile-actions, .profile-card-actions { display: flex; gap: 8px; }
.profile-page button, .profile-page a.profile-home, .profile-card-actions a { display: inline-block; padding: 8px 13px; border: 1px solid #7966ae; border-radius: 7px; color: #eff8f6; background: #29273d; font: 600 12px var(--body-font); text-decoration: none; cursor: pointer; }
.profile-page button:hover, .profile-page a:hover { border-color: #70d9bd; }
.profile-library { padding: 20px; border: 1px solid #655b82; border-radius: 12px; background: #13131e; }
.profile-library h2 { margin: 0 0 18px; color: #70d9bd; font-size: 17px; }
.profile-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.profile-list article { padding: 15px; border: 1px solid #514d70; border-radius: 9px; background: #242234; }
.profile-list h3 { margin: 0 0 7px; font-size: 16px; }
.profile-list p { color: #b7c9d7; font-size: 11px; }