/* Start with a character or a party slot, then reveal editing and saving. */
.journey-start,.party-start-heading { margin:2px 0 20px; max-width:800px }
.journey-start h1,.party-start-heading h1 { font-size:25px; font-weight:700; line-height:1.45; letter-spacing:-.025em }
.journey-start p,.party-start-heading p { margin-top:7px; color:var(--muted); font-size:14px; line-height:1.75 }
.journey-steps { display:flex; align-items:stretch; gap:0; max-width:820px; padding:0; margin:0 0 20px; list-style:none; counter-reset:journey-step }
.journey-steps li { flex:1; display:flex; align-items:center; gap:8px; min-width:0; padding:8px 12px 10px 0; color:var(--muted); font-size:13px; line-height:1.5; border-bottom:2px solid var(--line); counter-increment:journey-step }
.journey-steps li+li { padding-left:18px }
.journey-steps li::before { content:counter(journey-step); display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--muted); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums }
.journey-steps li[data-state=current] { color:var(--accent); font-weight:700; border-bottom-color:var(--accent) }
.journey-steps li[data-state=current]::before { background:var(--accent); border-color:var(--accent); color:#fff }
.journey-steps li[data-state=done] { color:var(--ink); border-bottom-color:#94b8b3 }
.journey-steps li[data-state=done]::before { border-color:#94b8b3; color:var(--accent); background:#edf5f3 }
.journey-steps li strong { font-size:inherit }
.journey-steps li small { display:block; font-size:12px; font-weight:400; color:var(--muted) }
.journey-context { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:8px 0; margin-bottom:10px; font-size:13px; line-height:1.65; color:var(--muted); overflow-wrap:anywhere }
.journey-context strong { color:var(--ink); font-weight:650 }
.journey-context:empty { display:none }
.journey-context a { text-underline-offset:3px }

body.single-starting .editor-nav,
body.single-starting #workbench,
body.single-starting .build-complete-bar,
body.single-starting .slot-counters,
body.single-starting .slot-rules,
body.single-starting .character-picker label:has(#character-rank),
body.single-starting .character-picker label:has(#character-level),
body.single-starting:not(.has-saved-builds) .build-library { display:none }
body.single-starting.has-saved-builds .build-library { display:flex; align-items:center; gap:10px; padding:0 0 16px; margin-bottom:16px; border:0; border-bottom:1px solid var(--line); background:transparent }
body.single-starting.has-saved-builds .build-library>*:not(#saved-builds):not(.saved-build-label) { display:none }
body.single-starting.has-saved-builds .build-library .saved-build-label { display:block; font-size:13px; font-weight:600 }
body.single-starting.has-saved-builds .build-library #saved-builds { width:min(100%,400px); max-width:100%; min-width:0; flex:1 1 260px; min-height:44px }
body.single-starting .character-slots { max-width:820px; padding:18px 20px 20px; margin:0 0 16px; border:1px solid var(--line); border-radius:5px; background:var(--paper) }
body.single-starting #character-settings { width:100%; margin:0 }
body.single-starting #character-settings>summary { font-size:17px; min-height:0; padding:0 0 14px; font-weight:650 }
body.single-starting #character-settings>summary .hint { display:none }
body.single-starting .character-picker { display:flex; align-items:flex-end; gap:10px; margin:0; padding:0 }
body.single-starting .character-picker label:first-child { display:flex; flex-direction:column; align-items:stretch; text-align:left; flex:1 1 auto; gap:6px; min-width:0; font-size:13px; color:var(--muted) }
body.single-starting #character-name { min-height:48px; width:100%; max-width:none; min-width:0; padding:10px 12px; font-size:16px; color:var(--ink) }
body.single-starting #character-apply { flex:0 0 auto; align-self:flex-start; min-height:48px; min-width:92px; margin-top:27px; padding:10px 18px; color:#fff; background:var(--accent); border-color:var(--accent); font-size:15px }
body.single-starting #character-apply:hover { filter:brightness(.94) }
#character-error { display:block; max-width:100%; font-size:12px; line-height:1.65; font-weight:400; overflow-wrap:anywhere }
#character-error:empty { display:none }
.journey-alternatives { display:flex; flex-wrap:wrap; align-items:center; gap:10px; max-width:820px; margin:0 0 20px }
.journey-alternatives>p,.journey-alternatives>h2,.journey-alternatives>span { flex-basis:100%; margin:0; font-size:13px; font-weight:500; color:var(--muted) }
.journey-alternatives button { min-height:46px; padding:10px 15px; font-size:14px; white-space:normal; text-align:left }
.journey-alternatives button small { display:block; font-size:12px; font-weight:400; color:var(--muted) }
.build-complete-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:16px 0; margin-top:18px; border-top:1px solid var(--line) }
.build-complete-bar>div { flex:1 1 220px; min-width:0 }
.build-complete-bar p,.build-complete-bar small { color:var(--muted); font-size:13px; line-height:1.7 }
.build-complete-bar strong { display:block; font-size:14px; line-height:1.7 }
.build-complete-bar button { min-height:44px; font-size:14px; white-space:normal }

body.party-starting .party-toolbar { display:none }
.party-page .party-empty { padding:12px 0 28px }
.party-start-heading { margin-bottom:18px }
.party-page .party-empty .party-start-heading h1 { margin:0; font-size:25px }
.party-page .party-empty .party-start-heading p { margin:7px 0 0; color:var(--muted) }
#party-empty-slots { margin:0 0 20px }
.member-slot.empty { justify-content:center; align-items:center; text-align:center; min-height:108px; border:1px dashed #9bacae; background:var(--paper); gap:6px; color:var(--accent) }
.member-slot.empty:hover { background:#edf5f3; border-color:var(--accent) }
.member-slot.empty .slot-number { color:var(--muted); letter-spacing:.04em }
.member-slot.empty strong { font-size:14px; line-height:1.55; text-wrap:balance }
.member-slot.empty small { color:var(--muted); font-size:12px; font-weight:400 }
.member-slot.empty[aria-pressed=true] { border-style:solid; background:#edf5f3 }
.party-page .party-empty>button { min-height:44px; padding:10px 14px; margin:0 8px 10px 0; font-size:14px }
.party-page .party-empty>p { color:var(--muted); font-size:13px; margin:0 0 14px }
.party-start-actions { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:12px 0 }
.party-start-actions button { min-height:44px; white-space:normal; font-size:14px }
.party-heading { padding:18px 0 10px }
.party-heading button { min-height:44px; white-space:normal }
.party-tabs { margin:14px 0 18px }
.party-toolbar #party-status { font-size:12px; line-height:1.5 }
.party-toolbar button,.party-toolbar summary { min-height:44px }
.member-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 18px }
.member-methods .method-button { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:4px; min-width:0; min-height:82px; padding:13px 14px; text-align:left; white-space:normal; border-color:var(--line); background:var(--paper); line-height:1.5 }
.member-methods .method-button strong { font-size:14px; font-weight:650; color:var(--ink); overflow-wrap:anywhere; text-wrap:balance }
.member-methods .method-button small { font-size:12px; font-weight:400; color:var(--muted); overflow-wrap:anywhere }
.member-methods .method-button:hover { background:#f0f6f4; border-color:#a9c5c0 }
.member-methods .method-button[aria-pressed=true],.member-methods .method-button[aria-selected=true],.member-methods .method-button.active { border-color:var(--accent); background:#edf5f3; box-shadow:inset 0 0 0 1px var(--accent) }
.member-methods .method-button[aria-pressed=true] strong,.member-methods .method-button[aria-selected=true] strong,.member-methods .method-button.active strong { color:var(--accent) }
#member-paste-area,#member-builder-area { min-width:0; padding-top:2px }
#member-builder-area select { width:100%; min-height:46px; max-width:100%; font-size:15px }
#member-builder-area>button { min-height:44px; margin:0 8px 10px 0; font-size:14px; white-space:normal }
#member-builder-area p { font-size:13px; color:var(--muted); line-height:1.75; margin:8px 0 12px }
.member-settings-summary { display:flex; flex-wrap:wrap; gap:4px 14px; padding:10px 12px; margin:10px 0 16px; background:#f0f3f4; border-left:3px solid #a8bab9; color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere }
.member-settings-summary strong { color:var(--ink); font-weight:650 }
.member-settings-summary:empty { display:none }
.member-actions-bottom { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 0 8px; margin-top:18px; border-top:1px solid var(--line) }
.member-actions-bottom button { min-height:46px; font-size:14px; white-space:normal }
.member-actions-bottom .member-edit-status,.member-actions-bottom>[role=status] { flex-basis:100%; margin:0 }
.member-edit-status { margin:10px 0; font-size:13px; line-height:1.7; color:var(--muted); overflow-wrap:anywhere }
.member-edit-status:empty { display:none }
.member-save-row { grid-column:1/-1; min-width:0 }
.member-edit-status[data-state=dirty] { color:#846221 }

dialog.transfer-dialog,.party-page dialog.transfer-dialog { width:660px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:24px; overflow:auto }
.transfer-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.transfer-dialog>header h2 { font-size:21px; min-width:0; line-height:1.45; overflow-wrap:anywhere }
.transfer-dialog>header button { min-width:44px; min-height:44px; flex-shrink:0 }
.transfer-dialog>p { color:var(--muted); font-size:14px; line-height:1.75; margin:10px 0 16px }
.transfer-dialog label { display:flex; flex-direction:column; gap:7px; margin:14px 0; color:var(--ink); font-size:14px; font-weight:600; min-width:0 }
.transfer-dialog input:not([type=checkbox]):not([type=radio]),.transfer-dialog select { width:100%; min-width:0; max-width:100%; min-height:46px; padding:9px 12px; font-size:16px; font-weight:400 }
.transfer-dialog label:has(input[type=checkbox]),.transfer-dialog label:has(input[type=radio]) { flex-direction:row; align-items:flex-start; font-weight:400; line-height:1.7; gap:9px }
.transfer-dialog input[type=checkbox],.transfer-dialog input[type=radio] { margin-top:3px; flex-shrink:0 }
.transfer-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 }
.transfer-slot { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:5px; min-width:0; min-height:84px; padding:12px; text-align:left; white-space:normal; background:var(--paper); border:1px solid var(--line); font-size:14px; overflow-wrap:anywhere }
.transfer-slot small { color:var(--muted); font-size:12px; line-height:1.5; font-weight:400 }
.transfer-slot>span { color:var(--muted); font-size:12px; line-height:1.5; font-weight:400 }
.transfer-dialog .transfer-source { padding:10px 12px; background:#f0f3f4; border-left:3px solid #a8bab9; color:var(--ink); overflow-wrap:anywhere }
.transfer-preview { padding:12px; margin:12px 0; border:1px solid var(--line); border-radius:3px; background:#f6f8f8; font-size:13px; line-height:1.7; overflow-wrap:anywhere }
.transfer-preview:empty { display:none }
.transfer-preview p+p { margin-top:6px }
.transfer-dialog .transfer-confirm { align-items:flex-start; padding:12px; border-left:3px solid #ba9653; background:#fff8eb; font-size:13px; line-height:1.7; overflow-wrap:anywhere }
.transfer-slot[aria-pressed=true],.transfer-slot[aria-selected=true],.transfer-slot.selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:#edf5f3; color:var(--accent) }
.transfer-slot:hover { border-color:var(--accent) }
.transfer-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line) }
.transfer-actions button { min-height:46px; font-size:14px; white-space:normal }
.transfer-error { color:#9b3329; font-size:13px; line-height:1.7; margin:12px 0; overflow-wrap:anywhere }
.transfer-error:empty { display:none }

@media(min-width:901px) {
  .single-starting #main { padding-top:26px }
  .single-starting .journey-start { margin-bottom:22px }
  .single-starting .journey-alternatives button { min-width:210px }
  .party-starting .party-main { padding-top:28px }
  .party-starting #party-empty { max-width:1040px }
}
@media(max-width:900px) {
  .journey-start,.party-start-heading { margin:4px 0 16px }
  .journey-start h1,.party-start-heading h1,.party-page .party-empty .party-start-heading h1 { font-size:22px }
  .journey-start p,.party-start-heading p { font-size:13px; line-height:1.75; margin-top:6px }
  .journey-steps { margin-bottom:14px }
  .journey-steps li { gap:6px; padding:7px 5px 9px 0; font-size:12px; line-height:1.45 }
  .journey-steps li+li { padding-left:7px }
  .journey-steps li::before { flex-basis:22px; width:22px; height:22px; font-size:11px }
  .journey-steps li small { font-size:10px; line-height:1.45 }
  .journey-context { padding:3px 0 8px; margin-bottom:8px; gap:4px 10px; font-size:12px }
  body.single-starting .character-slots { padding:15px 14px 16px; margin-bottom:14px }
  body.single-starting #character-settings>summary { font-size:16px; padding-bottom:12px }
  body.single-starting .character-picker { flex-wrap:nowrap; gap:8px }
  body.single-starting .character-picker label:first-child { flex:1 1 auto }
  body.single-starting #character-name { padding-inline:10px }
  body.single-starting #character-apply { min-width:64px; padding-inline:12px; font-size:14px }
  body.single-starting.has-saved-builds .build-library { padding-bottom:12px; margin-bottom:14px; flex-wrap:wrap; gap:6px }
  body.single-starting.has-saved-builds .build-library .saved-build-label { flex-basis:100%; font-size:12px }
  body.single-starting.has-saved-builds .build-library #saved-builds { flex-basis:100%; width:100% }
  .journey-alternatives { gap:8px; margin-bottom:16px }
  .journey-alternatives button { flex:1 1 140px; min-width:0; min-height:48px; font-size:13px; padding:10px; line-height:1.5 }
  .journey-alternatives button small { font-size:12px }
  .build-complete-bar { padding:14px 0 max(12px,env(safe-area-inset-bottom)); gap:8px; margin-top:14px }
  .build-complete-bar>div { flex-basis:100% }
  .build-complete-bar button { flex:1 1 145px; min-width:0; padding:10px; line-height:1.5 }
  .party-page .party-empty { padding-top:6px }
  .party-start-heading { margin-bottom:16px }
  #party-empty-slots { gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:16px }
  .member-slot.empty { min-height:92px; padding:10px 6px; gap:4px }
  .member-slot.empty strong { font-size:13px }
  .member-slot.empty small { font-size:11px }
  .party-toolbar { grid-template-columns:minmax(0,1fr) auto auto }
  .party-toolbar #party-select { grid-column:1/-1 }
  .party-toolbar #party-new,.party-toolbar #open-user-templates,.party-toolbar #party-management { min-width:0; font-size:13px }
  .party-toolbar #party-new { grid-column:1 }
  .party-toolbar #open-user-templates { grid-column:2 }
  .party-toolbar #party-management { grid-column:3; align-self:stretch }
  .party-toolbar #party-management[open] { grid-column:1/-1; grid-row:auto }
  .party-toolbar #party-management summary { padding:10px 5px; font-size:13px }
  .party-toolbar #party-status { margin:0; padding-top:2px }
  .party-page.member-focused:not(.party-save-blocked) .party-toolbar { display:block; border:0; padding:0; margin:0 0 6px }
  .party-page.member-focused:not(.party-save-blocked) .party-toolbar>*:not(#party-status) { display:none }
  .party-page.member-focused:not(.party-save-blocked) .party-toolbar #party-status { display:block; padding:0; margin:0; min-height:18px }
  .party-heading { padding-top:16px }
  .member-methods { gap:6px; margin-bottom:14px }
  .member-methods .method-button { padding:10px 8px; min-height:96px; gap:5px }
  .member-methods .method-button strong { font-size:13px; line-height:1.5 }
  .member-methods .method-button small { font-size:11px; line-height:1.5 }
  #member-builder-area select { font-size:16px }
  #member-builder-area>button { width:100%; margin-right:0 }
  .member-settings-summary { margin-block:8px 14px; font-size:12px }
  .member-actions-bottom { gap:8px; padding:14px 0 max(12px,env(safe-area-inset-bottom)); margin-top:14px }
  .member-actions-bottom button { flex:1 1 145px; min-width:0; padding:10px; line-height:1.5 }
  .member-actions-bottom button.text-button { flex-basis:100% }
  .member-edit-status { font-size:12px }
  dialog.transfer-dialog,.party-page dialog.transfer-dialog { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:16px }
  .transfer-dialog>header h2 { font-size:19px }
  .transfer-dialog>header { position:sticky; top:-16px; margin-top:-16px; padding:12px 0; background:var(--paper); z-index:2 }
  .transfer-dialog>p { font-size:13px; margin-bottom:12px }
  .transfer-slots { gap:6px }
  .transfer-slot { min-height:82px; padding:10px 8px; font-size:13px }
  .transfer-slot small { font-size:11px }
  .transfer-slot>small:last-child { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
  .transfer-actions { position:sticky; bottom:-16px; z-index:2; padding:12px 0 max(12px,env(safe-area-inset-bottom)); background:var(--paper); gap:8px }
  .transfer-actions button { flex:1 1 120px; min-width:0 }
}
@media(max-width:360px) {
  .journey-start h1,.party-start-heading h1,.party-page .party-empty .party-start-heading h1 { font-size:21px }
  .journey-steps li { font-size:11px; gap:4px }
  .journey-steps li+li { padding-left:5px }
  .journey-steps li::before { flex-basis:20px; width:20px; height:20px }
  body.single-starting .character-slots { padding-inline:12px }
  .member-methods .method-button { padding-inline:6px }
  .member-methods .method-button strong { font-size:12px }
}
@media(max-height:500px) {
  .transfer-dialog>header,.transfer-actions { position:static }
  .journey-start,.party-start-heading { margin-bottom:10px }
}