.journey { background: var(--surface); color: var(--ink); padding: var(--s5); border-radius: var(--r-card); font: var(--fs-body) var(--font); }
.journey p, .journey li { color: var(--ink-2); margin-block: var(--s4); }
.journey label { color: var(--ink); }
.journey input, .journey select { color: var(--ink); background: var(--surface-raised); border-color: var(--ink-2); }
.journey :focus-visible, #author-entry:focus-visible { outline: var(--s1) solid var(--focus); outline-offset: var(--s1); }
.journey .error:empty { display: none; }
.journey .actions { gap: var(--s3); }

.journey input[type="checkbox"] { width: auto; margin-inline-end: var(--s2); }
.journey fieldset { border-color: var(--border); border-radius: var(--r-control); padding: var(--s4); margin-block: var(--s4); }

/* O cromo legado também define --ink; os novos percursos usam --ink-2, preservado nos dois temas. */
.journey, .journey :is(h1,h2,h3,h4,label,input,select) { color: var(--ink-2); }
.journey a { color: var(--brand); }
.journey button { color: var(--ink-2); background: var(--surface-raised); border-color: var(--ink-2); }
.journey button.primary { color: var(--page); background: var(--brand); }
dialog:has(.journey) [hidden] { display: none !important; }

dialog:has(.journey), dialog:has(.journey) :is(.modal-header,.modal-body,.modal-footer) { background: var(--surface); color: var(--ink-2); border-color: var(--border); }
dialog:has(.journey) :is(input,select,textarea,button), .journey .button { color: var(--ink-2); background: var(--surface-raised); border-color: var(--ink-2); }
dialog:has(.journey) button.primary, .journey .button.primary { color: var(--page); background: var(--brand); }
dialog:has(.journey) a { color: var(--brand); }
dialog:has(.journey) .muted { color: var(--ink-2); }
dialog:has(.journey) .note { color: var(--ink-2); background: var(--surface-raised); border-color: var(--border); }

/* Keep tabular previews readable in both themes, including the legacy table shell. */
.journey :is(table,thead,tbody,tr,th,td), .journey .table-wrap { background: var(--surface); color: var(--ink-2); border-color: var(--border); }
.journey tbody tr:nth-child(even) td { background: var(--surface-raised); }
.journey pre { color: var(--ink-2); background: var(--surface-raised); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Contextual next steps use the same visible control shape as journey buttons. */
.journey a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--s3) var(--s4); border: 1px solid var(--ink-2); border-radius: var(--r-control); font-weight: 600; text-decoration: none; }
.journey a.button:hover { text-decoration: underline; }

/* Task navigation preserves the full catalogue behind a personal view switch. */
.navigation-tools{padding:12px;display:grid;gap:12px}
.navigation-tools button{width:100%;text-align:left;display:flex;justify-content:space-between;gap:8px}
.navigation-tools label{display:grid;gap:6px;font-size:12px}
.navigation-tools select{width:100%;min-height:40px}
.navigation-tools kbd{font-size:10px;color:inherit}
.nav-advanced>summary{padding:14px 20px;cursor:pointer;font-weight:600}
#menu-results{max-height:55vh;overflow:auto}
#menu-results small{display:block;color:var(--muted);font-size:12px}
.home-actions{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0 36px}
.home-actions>.button,.home-actions>button{flex:1;min-width:180px;min-height:88px;font-size:18px;justify-content:center;text-align:center}
.dashboard-more-panel section{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.dashboard-more-panel section[hidden]{display:none}
.dashboard-more-panel h3{flex-basis:100%;margin:4px 0;font-size:13px}
@media(max-width:600px){.home-actions{gap:12px}.home-actions>.button,.home-actions>button{flex-basis:100%;min-height:64px}.dashboard-more-panel{max-width:calc(100vw - 40px)}}
.home-actions>.button,.home-actions>button{display:flex;align-items:center;padding:16px;border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface-raised);color:var(--ink);font-weight:600}
.home-actions>.button:hover,.home-actions>button:hover{background:var(--surface);text-decoration:none}
.navigation-tools :is(button,select){background:var(--surface-raised);color:var(--ink);border-color:var(--border)}
.nav-task>summary{padding:12px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.nav-task .nav-link{padding-inline-start:24px}
.nav-task[open]{margin-bottom:12px}
.nav-advanced>summary{padding:12px;font-weight:600;color:var(--ink-2)}

/* Relationship diagnostics remain readable without horizontal scrolling. */
.coverage-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--s7)*4 + var(--s2)),1fr));gap:var(--s4)}
.coverage-sides section{padding:var(--s4);border:var(--stroke) solid var(--border);border-radius:var(--r-card)}
.coverage-sides dl{margin:0}.coverage-sides dl div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s1) 0}.coverage-sides dd{margin:0;font-variant-numeric:tabular-nums}
dialog:has(#association-coverage),dialog:has(#association-coverage) :is(.modal-header,.modal-body,.modal-footer,fieldset){background:var(--surface);color:var(--ink);border-color:var(--border)}
dialog:has(#association-coverage) :is(input,select,button){background:var(--surface-raised);color:var(--ink);border-color:var(--border)}
dialog:has(#association-coverage) .primary{background:var(--brand);color:var(--on-brand)}

dialog:has(#ratio-preview),dialog:has(#ratio-preview) :is(.modal-header,.modal-body,.modal-footer,fieldset,.table-wrap,th,td){background:var(--surface);color:var(--ink);border-color:var(--border)}
dialog:has(#ratio-preview) :is(input,select,textarea,button){background:var(--surface-raised);color:var(--ink);border-color:var(--border)}
dialog:has(#ratio-preview) .primary{background:var(--brand);color:var(--on-brand)}

.common-scale-note{font-size:var(--fs-note);color:var(--ink-2);margin:var(--s1) 0 var(--s2)}
dialog:has(#scale-members),dialog:has(#scale-members) :is(.modal-header,.modal-body,.modal-footer){background:var(--surface);color:var(--ink);border-color:var(--border)}
dialog:has(#scale-members) :is(input,select,button){background:var(--surface-raised);color:var(--ink);border-color:var(--border)}
dialog:has(#scale-members) .primary{background:var(--brand);color:var(--on-brand)}

.appearance-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--s7)*4 + var(--s4) + var(--s3)),1fr));gap:var(--s4)}.appearance-list label{display:block;margin:var(--s2) 0;overflow-wrap:anywhere}.appearance-list input{width:auto}
dialog:has(#appearance-preview),dialog:has(#appearance-preview) :is(.modal-header,.modal-body,.modal-footer,fieldset){background:var(--surface);color:var(--ink);border-color:var(--border)}
dialog:has(#appearance-preview) :is(input,select,button){background:var(--surface-raised);color:var(--ink);border-color:var(--border)}
dialog:has(#appearance-preview) .primary{background:var(--brand);color:var(--on-brand)}

/* Navigation chrome: one menu, with personal controls kept in the header. */
.sidebar{display:flex;flex-direction:column;overflow:hidden;padding:0}
.navigation-body{overflow:auto;min-height:0;flex:1;padding:var(--s3) 10px}
.navigation-footer{flex-shrink:0;border-top:var(--stroke) solid var(--border);padding:var(--s3) calc(var(--s4) + var(--s1));background:var(--surface);color:var(--ink-2)}
.navigation-footer label{display:grid;gap:var(--s1);font-size:var(--fs-axis)}
.navigation-footer select{min-height:calc(var(--s6) + var(--s1));background:var(--surface);color:var(--ink-2);border-color:var(--border);font-size:var(--fs-note);padding:6px}
.topbar .user{gap:var(--s3)}.topbar .user>a:not(#author-entry){color:var(--ink-2)}
.notice-icon{display:flex;align-items:center;gap:var(--s1);min-width:calc(var(--s6) + var(--s3));min-height:calc(var(--s6) + var(--s3));justify-content:center;font-variant-numeric:tabular-nums}
#notice-count{font-size:var(--fs-note);color:var(--ink-2)}
.user-account{position:relative}.user-account>summary{display:flex;align-items:center;gap:var(--s2);list-style:none;min-height:calc(var(--s6) + var(--s3));color:var(--ink)}
.user-account>summary::-webkit-details-marker{display:none}.user-account>div{position:absolute;right:0;top:100%;display:grid;gap:var(--s2);padding:var(--s4);min-width:calc(var(--s7)*4 + var(--s2));background:var(--surface-raised);border:var(--stroke) solid var(--border);border-radius:var(--r-control);box-shadow:var(--shadow-hover)}
.user-account:not([open])>div{display:none}.user-account :is(a,button){color:var(--ink);text-align:left;min-height:calc(var(--s6) + var(--s1))}.user-account small{display:block!important;color:var(--ink-2)}
.user-account #logout,.user-account #experience-mode{display:block!important}
.home-shortcuts{margin-block:2var(--s1)}.home-shortcuts h2{font-size:var(--fs-card-title)}.home-shortcuts :is(a,button){min-height:calc(var(--s6) + var(--s3));background:var(--surface-raised);border:var(--stroke) solid var(--border);color:var(--ink);padding:var(--s3) var(--s4);border-radius:var(--r-control)}
@media(max-width:767px){.topbar .user{gap:var(--s1)}.account-name{display:none}.topbar .user #author-entry{display:inline-flex;font-size:var(--fs-note);padding:var(--s2)}.topbar{padding-inline:var(--s3);gap:var(--s2)}.notice-icon{min-width:calc(var(--s6) + var(--s2))}.navigation-footer select{min-height:calc(var(--s6) + var(--s3))}}
@media(max-width:767px){.sidebar:not(.open){display:none}.sidebar.open{display:flex}}

.semantic-editor{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s5);color:var(--ink)}
.semantic-editor form{min-width:0}.semantic-editor aside{border-left:1px solid var(--border);padding-left:var(--s5)}
.model-diagram{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s5) 0}.model-diagram article{border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4);flex:1 1 220px;background:var(--surface)}
.semantic-editor fieldset{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0;border:1px solid var(--border)}
.semantic-editor label{display:flex;flex-direction:column;gap:var(--s2)}.semantic-editor small{overflow-wrap:anywhere}.semantic-editor pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:768px){.semantic-editor{grid-template-columns:1fr}.semantic-editor aside{border-left:0;padding-left:0}.semantic-editor fieldset{flex-direction:column}}