.wb-host { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.wb-host > .wb-workspace, .wb-host > .magic-workspace { flex: 1; }
.wb-toolbar { padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.wb-workspace, .entity-view.magic-workspace { display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); height: 100%; min-height: 0; color: var(--color-text); background: var(--color-bg); }
.wb-sidebar, .magic-workspace > .entity-sidebar { width: auto; min-width: 0; padding: 24px 16px; overflow: auto; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.wb-main, .magic-workspace > .magic-main { overflow: auto; min-width: 0; min-height: 0; padding: clamp(20px, 3vw, 40px); scrollbar-gutter: stable; overflow-wrap: anywhere; }
.wb-main .btn, .magic-workspace .btn, .magic-workspace .btn-danger { min-width: 0; max-width: 100%; white-space: normal; }
.wb-main > *, .magic-workspace-heading, .magic-tab-content { max-width: 1000px; margin-inline: auto; }
.wb-main > .wb-section { margin-inline: auto; }
.wb-workspace [hidden], .magic-workspace [hidden] { display: none !important; }
.wb-sidebar-heading { display: grid; gap: 8px; margin-bottom: 20px; }
.wb-sidebar-heading h2, .magic-workspace .entity-sidebar-title { font-size: var(--text-lg); line-height: 1.4; margin: 0; }
.wb-sidebar-heading > .btn { justify-self: start; margin-top: 4px; }
.wb-workspace .workspace-eyebrow, .magic-workspace .workspace-eyebrow { margin: 0 0 4px; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; }
.wb-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--color-surface-subtle); margin-bottom: 20px; }
.wb-tabs .btn { flex: 1; }
.wb-field { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; min-width: 0; }
.wb-field > span { font-size: var(--text-sm); font-weight: 600; }
.wb-workspace input:not([type=checkbox]), .wb-workspace textarea, .wb-workspace select { padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-text); font: inherit; min-width: 0; max-width: 100%; box-sizing: border-box; }
.wb-workspace input::placeholder, .wb-workspace textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.wb-workspace textarea { resize: vertical; line-height: 1.7; min-height: 112px; }
.wb-workspace input[type=checkbox] { accent-color: var(--color-accent); }
.wb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.wb-grid > .btn { align-self: end; justify-self: start; margin-bottom: 16px; }
.wb-record-header, .magic-workspace-heading { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.wb-record-header > div:first-child, .magic-workspace-heading > div { flex: 1; min-width: 0; }
.wb-record-header h2, .magic-workspace-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; overflow-wrap: anywhere; }
.wb-record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-record-menu { position:relative; }
.wb-record-menu > summary { list-style:none;cursor:pointer;min-height:44px; }
.wb-record-menu > summary::-webkit-details-marker { display:none; }
.wb-record-menu-content { position:absolute;right:0;top:calc(100% + 6px);z-index:12;min-width:180px;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-popover); }
.wb-record-menu-content .btn { width:100%;justify-content:flex-start; }
.wb-record-actions .btn-danger, .magic-workspace .entity-form-actions .btn-danger { display: inline-flex; gap: 8px; align-items: center; }
.wb-workspace-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wb-workspace-tools p { flex: 1; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.wb-workspace-tools p:empty { display: none; }
.wb-workspace-tools > [data-wb-action=reload] { margin-left: auto; }
.wb-summary { padding: 8px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.wb-summary > .wb-field:last-child { max-width: 320px; }
.wb-help, .wb-list-item small { color: var(--color-text-muted); line-height: 1.6; }
.wb-help { font-size: var(--text-sm); }
.wb-section-heading { margin: 28px 0 14px; }
.wb-section-heading h3 { margin: 0; font-size: var(--text-lg); }
.wb-section-heading p { margin: 6px 0 0; }
.wb-section { margin: 12px 0; padding: 0 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.wb-section > summary { padding: 17px 0; font-size: var(--text-base); font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.wb-section[open] > summary { border-bottom: 1px solid var(--color-border); }
.wb-section-body { padding: 4px 0 20px; }
.wb-section-meta { float: right; margin-left: 12px; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.wb-section--compact { background: transparent; }
.wb-section--compact .wb-grid { row-gap: 12px; padding-top: 16px; }
.wb-section--compact label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.wb-source, .wb-custom { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 16px 0; background: var(--color-surface-subtle); }
.wb-related { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.wb-related > span:first-child { font-weight: 600; }
.wb-related > span { font-size: var(--text-sm); }
.wb-inline-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.wb-inline-actions .wb-field { margin-bottom: 0; }
.wb-empty { padding: clamp(24px, 6vw, 72px) 16px; max-width: 540px; line-height: 1.7; }
.wb-empty > .ruda-icon { color: var(--color-accent-text); width: 32px; height: 32px; }
.wb-empty h2 { font-size: 24px; line-height: 1.35; }
.wb-empty p { color: var(--color-text-muted); }
.wb-list-count { margin: 20px 8px 8px; color: var(--color-text-muted); font-size: var(--text-xs); }
.wb-list-empty { margin: 16px 8px; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.wb-list-item { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; padding: 13px 14px; margin: 4px 0; border: 1px solid transparent; background: transparent; color: var(--color-text); border-radius: var(--radius-md); cursor: pointer; overflow-wrap: anywhere; }
.wb-list-item strong { font-size: var(--text-base); font-weight: 600; }
.wb-list-item small { font-size: var(--text-xs); }
.wb-list-item:hover { background: var(--color-surface-hover); }
.wb-list-item.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); }
.wb-list-item.is-active strong { color: var(--color-accent-text); }
.wb-search, .magic-list-tools .workspace-search { display: flex; align-items: center; gap: 8px; position: relative; margin: 16px 0; }
.wb-search > svg, .magic-list-tools .workspace-search > svg { position: absolute; left: 12px; color: var(--color-text-muted); pointer-events: none; }
.wb-workspace .wb-search input, .magic-list-tools .workspace-search input { padding-left: 40px; width: 100%; }
.wb-workspace .workspace-filters, .magic-workspace .workspace-filters { margin-bottom: 16px; font-size: var(--text-sm); }
.wb-workspace .workspace-filters > summary, .magic-workspace .workspace-filters > summary { padding: 8px 2px; cursor: pointer; color: var(--color-text-muted); }
.wb-workspace .workspace-resume-button, .magic-workspace .workspace-resume-button { display: none; }
.magic-workspace .entity-sidebar-header { align-items: flex-start; padding: 0; gap: 12px; }
.magic-workspace .entity-sidebar-header > div { flex: 1; }
.magic-workspace .entity-sidebar-header > .btn { margin-top: 20px; }
.magic-workspace .entity-list { padding: 0; max-height: none; overflow: visible; }
.magic-workspace .entity-list-item { border-radius: var(--radius-md); margin: 4px 0; }
.magic-workspace .magic-tabs { max-width: 1000px; margin: 0 auto 24px; gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
.magic-workspace .magic-tab { flex: 0 0 auto; min-height: 40px; }
.magic-workspace .magic-tab-content { padding: 0; }
.magic-workspace .magic-system-form { max-width: none; }
.magic-workspace .entity-field { min-width: 0; }
.magic-workspace .entity-form-actions, .magic-workspace .magic-record-actions { flex-wrap: wrap; }
.magic-workspace .magic-panel-heading, .magic-workspace .magic-inline-editor-heading, .magic-workspace .magic-record-card-title-row { flex-wrap: wrap; }
.magic-workspace .magic-summary-heading { margin-bottom: 20px; }
.magic-workspace .magic-summary-heading h3 { font-size: var(--text-lg); }
.magic-draft-status { margin-top: 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
.magic-workspace .magic-details-toggle { display: flex; align-items: center; gap: 8px; }
.magic-details-toggle > svg { transition: transform var(--transition-fast); transform: rotate(-90deg); }
.magic-details-toggle.is-expanded > svg { transform: rotate(0); }
.magic-workspace .magic-record-card { border-radius: var(--radius-lg); background: var(--color-surface); }
.magic-workspace .magic-inline-editor { background: var(--color-surface); border-radius: var(--radius-lg); }
.magic-workspace .magic-record-card-title-row h4 { overflow-wrap: anywhere; }
.wb-main, .magic-workspace > .magic-main { padding: var(--workspace-padding, 32px); }
.wb-sidebar, .magic-workspace > .entity-sidebar { padding-block: var(--workspace-section-gap, 24px); }
.wb-sidebar-heading h2, .magic-workspace .entity-sidebar-title { font-size: 18px; letter-spacing: -.02em; }
.wb-record-header h2, .magic-workspace-heading h2 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; }
.wb-list-item { padding-block: var(--workspace-row-padding, 12px); }
.wb-list-item.is-active { border-color: var(--color-border); box-shadow: inset 3px 0 0 var(--color-accent-text); }
.wb-empty h2 { font-family: var(--font-display); font-size: clamp(27px, 3vw, 34px); font-weight: 500; letter-spacing: -.025em; }
.wb-empty > .ruda-icon { width: 36px; height: 36px; }
.wb-empty p { max-width: 45ch; margin-bottom: 24px; }
.wb-section > summary { padding-block: var(--workspace-section-gap, 24px); }
.wb-workspace-tools { margin-bottom: 20px; }
@media (min-width: 768px) and (max-width: 1199px) {
  .wb-workspace, .entity-view.magic-workspace { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); }
  .wb-sidebar, .magic-workspace > .entity-sidebar { padding: 20px 12px; }
  .wb-main, .magic-workspace > .magic-main { padding: 24px; }
  .wb-record-header { flex-direction: column; }
  .wb-record-header:has(.wb-record-actions) { display:contents; }
  .wb-record-header > div:first-child { margin-bottom:12px; }
  .wb-record-actions { position:sticky;top:-24px;z-index:5;padding:10px 0;margin:0 0 16px;background:var(--color-bg);border-bottom:1px solid var(--color-border); }
  .wb-main { scroll-padding-top:76px; }
  .wb-grid { grid-template-columns: 1fr; }
  .magic-workspace .entity-form { max-width: 100%; }
}
@media (max-width: 767px) {
  .wb-toolbar { padding: 10px 16px; }
  .wb-workspace, .entity-view.magic-workspace { display: block; overflow: hidden; }
  .wb-sidebar, .wb-main, .magic-workspace > .entity-sidebar, .magic-workspace > .magic-main { height: 100%; width: 100%; min-width: 0; max-width: none; padding: 20px 16px; border: 0; }
  .wb-workspace[data-mobile-pane=list] > .wb-main, .magic-workspace[data-mobile-pane=list] > .magic-main { display: none; }
  .wb-workspace[data-mobile-pane=detail] > .wb-sidebar, .magic-workspace[data-mobile-pane=detail] > .entity-sidebar { display: none; }
  .wb-workspace .workspace-resume-button, .magic-workspace .workspace-resume-button { display: inline-flex; margin: 0 0 12px; }
  .wb-workspace .workspace-back-button, .magic-workspace .workspace-back-button { display: inline-flex; }
  .magic-workspace-heading > .workspace-back-button { flex-basis: 100%; justify-content: flex-start; }
  .wb-record-header:has(.wb-record-actions) { display:contents; }
  .wb-record-header > div:first-child { flex-basis: 100%;margin-bottom:12px; }
  .wb-record-actions { width:100%;position:sticky;top:-20px;z-index:5;padding:10px 0;margin:0 0 16px;background:var(--color-bg);border-bottom:1px solid var(--color-border); }
  .wb-main { scroll-padding-top:76px; }
  .wb-record-actions > [data-wb-action=save] { flex: 1; }
  .wb-grid { grid-template-columns: 1fr; }
  .wb-summary { padding: 4px 16px; }
  .wb-section { padding: 0 16px; }
  .wb-workspace input:not([type=checkbox]), .wb-workspace select, .wb-workspace button, .magic-workspace button { min-height: 44px; }
  .wb-section > summary { min-height: 48px; }
  .wb-tabs { margin-top: 8px; }
  .magic-workspace .entity-sidebar-header { align-items: center; }
  .magic-workspace .entity-sidebar-header > .btn { margin-top: 0; }
  .magic-workspace .magic-record-card { flex-direction: column; }
  .magic-workspace .magic-record-actions { justify-content: flex-start; }
  .magic-workspace .entity-form-grid, .magic-workspace .magic-details-body { grid-template-columns: minmax(0, 1fr); }
  .magic-workspace .entity-field--half, .magic-workspace .entity-field--third { grid-column: 1 / -1; }
}
@media(pointer:coarse) { .wb-workspace :is(button,summary,input:not([type=checkbox]),select),.magic-workspace button { min-height:44px; } }

.universe-overlay { position:fixed;inset:0;z-index:100;background:var(--color-bg);overflow:auto;color:var(--color-text); }
.universe-page { max-width:1320px;margin:auto;padding:clamp(16px,3vw,40px); }
.universe-header,.universe-actions,.universe-card-header,.universe-breadcrumb { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.universe-header { margin-bottom:28px; }.universe-header > div:first-child { flex:1;min-width:0; }.universe-header h1 { margin:6px 0;overflow-wrap:anywhere; }
.universe-breadcrumb { gap:6px;min-width:0;font-size:var(--text-sm); }.universe-breadcrumb button { overflow:hidden;text-overflow:ellipsis;max-width:220px; }
.universe-breadcrumb .universe-current { color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.universe-grid { display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:24px; }
.universe-section { background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;min-width:0; }
.universe-section h2,.universe-section h3 { margin:0 0 12px; }.universe-section p { color:var(--color-text-muted);line-height:1.6; }
.universe-card { border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px;margin-top:12px;overflow-wrap:anywhere; }
.universe-card-header > strong { flex:1; }.universe-card.is-active { border-color:var(--color-accent-text); }.universe-card .btn { margin-top:8px; }
.universe-origin { font-size:var(--text-sm);color:var(--color-text-muted); }.universe-origin-badge { display:inline-block;border:1px solid var(--color-border);border-radius:99px;padding:3px 9px;font-size:var(--text-sm);margin:4px; }
.project-identity:has(.universe-breadcrumb) { max-width:min(48vw,560px); }.project-identity .universe-breadcrumb { flex-direction:row; }.project-identity .universe-breadcrumb button { padding:4px 6px; }
.project-main:has(> .universe-origin-banner) { display:flex;flex-direction:column; }.project-main > .universe-origin-banner { flex-shrink:0; }.project-main:has(> .universe-origin-banner) > :not(.universe-origin-banner) { flex:1;min-height:0; }.project-main:has(> .universe-origin-banner) > .writing-view { height:auto; }
.universe-notice { border-left:3px solid var(--color-accent-text);background:var(--color-surface);padding:16px;margin-bottom:20px;line-height:1.6; }
.universe-empty { padding:36px 12px;text-align:center;color:var(--color-text-muted); }
.universe-dialog { width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto; }
.universe-dialog .wb-field { display:flex;flex-direction:column;gap:7px;margin:16px 0; }.universe-dialog input,.universe-dialog select,.universe-dialog textarea { padding:10px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font:inherit;min-width:0; }.universe-dialog textarea { resize:vertical;min-height:130px; }
.universe-dialog .universe-choice { display:flex;align-items:flex-start;gap:10px;margin:14px 0;line-height:1.6; }.universe-choice input { margin-top:6px; }.universe-choice span { flex:1; }
.universe-dialog .universe-selection { max-height:320px;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px; }.universe-selection label { display:flex;gap:9px;margin:10px 0;align-items:flex-start; }
.universe-migration-row { display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,45%);gap:12px;align-items:center;border-top:1px solid var(--color-border);padding:14px 0; }.universe-migration-row small { display:block;color:var(--color-text-muted);margin-top:5px; }
.universe-history-item { border-top:1px solid var(--color-border);padding:16px 0; }.universe-history-item p { white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6; }
.universe-error { color:var(--color-danger-text); }.universe-origin-banner { padding:10px 20px;border-bottom:1px solid var(--color-border);font-size:var(--text-sm);background:var(--color-surface); }
.universe-records { max-height:300px;overflow:auto;padding:0;list-style:none; }.universe-records li { border-top:1px solid var(--color-border);padding:12px 0; }.universe-records strong { display:block; }
.universe-header { padding-bottom:24px;border-bottom:1px solid var(--color-border);align-items:flex-start; }
.universe-header h1 { font-family:var(--font-display);font-size:clamp(30px,3.5vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.2; }
.universe-header .workspace-eyebrow { font-size:var(--text-xs);margin-bottom:10px; }
.universe-section { padding:var(--workspace-section-gap,24px); }
.universe-section h2 { font-size:20px;letter-spacing:-.02em; }
.universe-section h3 { font-size:17px; }
.universe-card { background:var(--color-bg);padding:var(--workspace-section-gap,24px); }
.universe-card.is-active { background:var(--color-accent-soft-2);box-shadow:inset 3px 0 0 var(--color-accent-text);border-color:var(--color-border); }
.universe-card-header > strong { font-size:17px;font-weight:600;letter-spacing:-.015em; }
.universe-origin-badge { background:var(--color-surface);font-size:var(--text-xs);padding:3px 8px; }
.universe-empty { line-height:1.7; }
.universe-dialog input:not([type=checkbox]):not([type=radio]), .universe-dialog select, .universe-dialog textarea { border-color:var(--color-border-strong);background:var(--color-surface-raised); }
.universe-disclosure-toggle { display:none; }
.universe-stories > .universe-card-header > div { flex:1;min-width:0; }
.universe-stories .workspace-eyebrow { margin:0 0 6px;font-size:var(--text-xs); }
.universe-attach-actions { margin-top:16px; }
.universe-continuity-management { margin-top:20px;padding-top:20px;border-top:1px solid var(--color-border); }
.universe-story-location { margin-top:16px;padding-top:12px;border-top:1px solid var(--color-border);font-size:var(--text-sm);min-width:0; }
.universe-story-location > p,.universe-location-paths dd { overflow-wrap:anywhere;white-space:pre-wrap; }
.universe-story-location > p { margin:6px 0; }
.universe-location-paths { margin:20px 0;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);min-width:0; }
.universe-location-paths dt { font-weight:600;margin-top:14px; }.universe-location-paths dt:first-child { margin-top:0; }
.universe-location-paths dd { margin:6px 0 0;color:var(--color-text-muted);line-height:1.6; }
.universe-location-choices { min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px; }
@media(max-width:1199px) {
  .universe-overlay { inset:var(--app-viewport-top,0px) auto auto var(--app-viewport-left,0px);width:var(--app-viewport-width,100vw);height:var(--app-viewport-height,100dvh);overscroll-behavior:contain; }
  .universe-page { padding-top:max(16px,var(--safe-top,0px));padding-right:max(16px,var(--safe-right,0px));padding-bottom:max(16px,var(--safe-bottom,0px));padding-left:max(16px,var(--safe-left,0px)); }
}
@media(max-width:767px) { .universe-grid { display:flex;flex-direction:column;gap:0; }.universe-grid > aside { display:contents; }.universe-grid > main { order:1; }.universe-grid > aside > .universe-section:last-child { order:2; }.universe-section { padding:18px; }.universe-breadcrumb .universe-current { display:none; }.universe-breadcrumb button { max-width:150px; }.universe-migration-row { grid-template-columns:1fr; }.universe-actions .btn { min-height:44px; }.universe-header h1 { font-size:1.8rem; }.universe-card { padding:16px; } }
@media(max-width:767px) {
  .universe-header { gap:12px;padding-bottom:16px;margin-bottom:16px; }
  .universe-header > div:first-child { flex-basis:100%; }
  .universe-header .universe-actions { gap:8px; }
  .universe-disclosure-toggle { display:inline-flex;min-height:44px;white-space:normal; }
  .universe-mobile-disclosure[data-expanded=false] > .universe-disclosure-content { display:none; }
  .universe-mobile-disclosure[data-expanded=true] > .universe-disclosure-content { padding-top:12px; }
  .universe-continuities { padding:0;border:0;background:none;margin-bottom:12px; }
  .universe-continuities .universe-disclosure-content { padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin-top:8px; }
  .universe-stories { display:flex;flex-direction:column; }
  .universe-stories > .universe-card-header { order:0;align-items:flex-start;gap:8px; }
  .universe-stories > .universe-card-header > div { flex-basis:100%; }
  .universe-story-list { order:1; }
  .universe-attach-actions { order:2; }
  .universe-continuity-management { order:3;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border); }
  .universe-stories .universe-card-header h2 { margin-bottom:0; }
  .universe-story-list .universe-card-header { align-items:flex-start; }
  .universe-story-list .universe-card-header > strong { flex-basis:100%; }
  .universe-story-list [data-universe-action=open-story] { margin-top:0;background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent); }
  .universe-card .universe-disclosure-toggle { margin-top:0;font-size:var(--text-sm); }
  .universe-actions > .btn { white-space:normal; }
  .universe-dialog { width:100%;max-height:100%;border-radius:0; }
  .universe-dialog .modal-actions { position:sticky;bottom:0;background:var(--color-surface);padding-block:12px;margin-bottom:0; }
  .universe-dialog :is(input:not([type=checkbox]),select,button) { min-height:44px; }
}
@media(pointer:coarse) { .universe-page .btn,.universe-dialog button { min-height:44px; } }

@import url("./timelineHistorical.css");
/* The shell owns the available size. Only each pane scrolls its own content. */
[data-timeline-feature-host] {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.timeline-workspace {
  --tl-bg:var(--color-bg,#171922);
  --tl-panel:var(--color-surface,#20232e);
  --tl-border:var(--color-border,#363b4a);
  --tl-text:var(--color-text,#e6e8ef);
  --tl-muted:var(--color-text-muted,#abb2c6);
  --tl-accent:var(--color-accent-text,#8d98fa);
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  color: var(--tl-text);
  background: var(--tl-bg);
  font-size: 13px;
}
.timeline-workspace * {
  box-sizing: border-box;
}
.timeline-workspace button,
.timeline-workspace input,
.timeline-workspace select,
.timeline-workspace textarea,
.tl-modal button,
.tl-modal input,
.tl-modal select,
.tl-modal textarea {
  font: inherit;
  color: inherit;
  border: 1px solid var(--tl-border,#424959);
  background: var(--tl-panel,#252a36);
  border-radius: 6px;
}
.timeline-workspace button,
.tl-modal button {
  cursor: pointer;
  padding: 6px 9px;
  line-height: 1.3;
}
.timeline-workspace button:hover,
.tl-modal button:hover {
  border-color: var(--tl-accent,#929cf5);
  background: color-mix(in srgb, var(--tl-accent,#929cf5) 10%, var(--tl-panel,#252a36));
}
.timeline-workspace button:disabled {
  opacity: .45;
  cursor: default;
}
.timeline-workspace :focus-visible,
.tl-modal :focus-visible {
  outline: 2px solid var(--tl-accent,#929cf5);
  outline-offset: 3px;
}
.timeline-workspace [hidden] {
  display: none !important;
}
.timeline-workspace h2,
.timeline-workspace h3,
.timeline-workspace h4,
.tl-modal h3 {
  margin: 0;
  font-weight: 650;
}
.timeline-workspace h2 {
  font-size: 19px;
}
.timeline-workspace h3 {
  font-size: 15px;
}
.timeline-workspace h4 {
  font-size: 13px;
  margin: 16px 0 8px;
}
.timeline-workspace p {
  line-height: 1.5;
}
.timeline-workspace .tl-muted,
.tl-muted {
  font-size: 12px;
  color: var(--tl-muted,#abb2c6);
  line-height: 1.5;
}
.tl-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tl-border);
  flex-shrink: 0;
}
.tl-heading {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tl-badge {
  display: inline-flex;
  border: 1px solid var(--tl-border);
  border-radius: 15px;
  font-size: 11px;
  padding: 2px 7px;
  color: var(--tl-muted);
  line-height: 1.4;
}
.tl-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}
.tl-primary-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 220px);
  align-items: end;
  gap: 9px;
  min-width: 0;
}
.tl-primary-toolbar > *,
.tl-new {
  min-width: 0;
}
.tl-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin-bottom: 10px;
}
.tl-toolbar .tl-field,
.tl-primary-toolbar .tl-field {
  margin: 0;
}
.tl-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--tl-muted,#abb2c6);
}
.tl-field input,
.tl-field select,
.tl-field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 8px;
}
.tl-field select[multiple] {
  min-height: 90px;
}
.tl-field textarea {
  resize: vertical;
  line-height: 1.5;
}
.tl-toolbar select {
  max-width: 205px;
}
.tl-primary-toolbar select {
  max-width: 100%;
}
.tl-search {
  flex: 1;
  min-width: 0;
}
.tl-toolbar > button {
  min-height: 32px;
}
.tl-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 9px;
}
.tl-navigation button {
  font-size: 12px;
  padding: 5px 8px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tl-navigation button[aria-pressed=true] {
  color: var(--tl-accent);
  border-color: var(--tl-accent);
}
.tl-axis-description {
  font-size: 11px;
  color: var(--tl-muted);
  margin: 9px 0 0 !important;
  overflow-wrap: anywhere;
}
.tl-options {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  margin-top: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--tl-border);
}
.tl-options > .tl-panel-heading {
  display: none;
}
.tl-options .tl-toolbar > .tl-field {
  flex: 0 1 205px;
}
.tl-workspace-body {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.tl-filters {
  border-right: 1px solid var(--tl-border);
  overflow: auto;
  padding: 15px 12px;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
}
.tl-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
  overflow-wrap: anywhere;
}
.tl-panel-heading > :first-child {
  min-width: 0;
}
.tl-panel-heading > button {
  flex-shrink: 0;
}
.tl-filters details {
  border-top: 1px solid var(--tl-border);
  padding: 10px 0;
}
.tl-filters summary {
  font-weight: 600;
  cursor: pointer;
  line-height: 1.5;
}
.tl-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 19px;
  height: 18px;
  border-radius: 10px;
  background: var(--tl-border);
  font-size: 11px;
  padding: 0 5px;
  color: var(--tl-muted);
}
.tl-check {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  line-height: 1.4;
  font-size: 12px;
  cursor: pointer;
}
.tl-check input {
  width: 14px;
  height: 14px;
  flex: none;
  accent-color: var(--tl-accent);
}
.tl-lane-option {
  padding: 5px 0 7px;
}
.tl-lane-option .tl-check span {
  overflow-wrap: anywhere;
}
.tl-lane-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 0;
  margin-top: 3px;
}
.tl-lane-tools button {
  font-size: 11px;
  padding: 2px 5px;
  min-width: 23px;
  height: 23px;
}
.tl-lane-tools button[aria-pressed=true] {
  color: var(--tl-accent);
}
.tl-lane-tools input[type=color] {
  width: 25px;
  height: 23px;
  padding: 2px;
  cursor: pointer;
}
.timeline-workspace .tl-text-button {
  border: 0;
  background: transparent;
  padding: 4px 0;
  text-align: left;
  color: var(--tl-accent);
  white-space: normal;
  overflow-wrap: anywhere;
}
.tl-text-button:hover {
  text-decoration: underline;
}
.tl-center {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tl-scroll {
  overflow: auto;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
  background: var(--tl-bg);
}
.tl-axis-row,
.tl-graph-row {
  display: flex;
  min-width: max-content;
}
.tl-axis-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--tl-panel);
  border-bottom: 1px solid var(--tl-border);
}
.tl-lane-title {
  width: var(--tl-lane-width, 190px);
  min-width: var(--tl-lane-width, 190px);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--tl-panel);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 16px 10px;
  border-right: 1px solid var(--tl-border);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.tl-lane-title > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tl-axis-title {
  font-size: 11px;
  font-weight: 650;
  align-items: center;
  padding-top: 10px;
  z-index: 5;
}
.tl-dot {
  height: 8px;
  width: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--tl-color,#7c83e8);
  margin-top: 4px;
}
.tl-lanes-body {
  position: relative;
}
.tl-graph-row {
  border-bottom: 1px solid color-mix(in srgb, var(--tl-border) 65%, transparent);
}
.tl-graph-row svg {
  flex: none;
  overflow: hidden;
  touch-action: pan-y;
}
.tl-axis {
  flex: none;
  fill: var(--tl-muted);
  font-size: 10px;
}
.tl-axis line {
  stroke: var(--tl-border);
}
.tl-grid-line {
  stroke: var(--tl-border);
  stroke-dasharray: 2 6;
  stroke-opacity: .45;
}
.tl-cursor-line {
  stroke: var(--tl-accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  pointer-events: none;
}
.tl-range-band {
  fill: var(--tl-accent);
  opacity: .11;
  pointer-events: none;
}
.tl-mark {
  cursor: pointer;
  fill: var(--tl-color);
  stroke: var(--tl-color);
  stroke-width: 1.5;
}
.tl-mark > path,
.tl-mark > rect,
.tl-mark > circle {
  transition: filter .1s;
}
.tl-mark:hover > path,
.tl-mark:hover > rect,
.tl-mark:hover > circle {
  filter: brightness(1.3);
}
.tl-mark-label {
  fill: var(--tl-text);
  stroke: var(--tl-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
  font-size: 11px;
  paint-order: stroke fill;
  pointer-events: none;
  text-shadow: 0 1px 3px var(--tl-bg);
}
.tl-mark.is-hollow > circle,
.tl-mark.is-hollow > rect,
.tl-mark.is-hollow > path {
  fill: var(--tl-bg);
  stroke-dasharray: 3 2;
}
.tl-mark.is-selected {
  stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--tl-color));
}
.tl-mark.is-related:not(.is-selected) {
  stroke-width: 2.5;
}
.tl-mark.is-approximate > rect,
.tl-mark.is-approximate > path {
  stroke-dasharray: 4 3;
}
.tl-mark.is-approximate > rect {
  fill-opacity: .5;
}
.tl-mark:focus {
  outline: none;
}
.tl-mark:focus > circle,
.tl-mark:focus > rect,
.tl-mark:focus > path {
  stroke: var(--tl-text);
  stroke-width: 3;
}
.tl-resize {
  opacity: 0;
  fill: var(--tl-bg);
  stroke: var(--tl-color);
  cursor: ew-resize;
}
.tl-mark:hover .tl-resize,
.tl-mark.is-selected .tl-resize {
  opacity: 1;
}
.tl-uncertainty {
  color: var(--tl-muted);
  pointer-events: none;
}
.tl-cluster-label {
  fill: #fff;
  stroke: none;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
[data-tl-cluster] {
  cursor: zoom-in;
}
.tl-connectors {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.tl-connectors path {
  fill: none;
  stroke: var(--tl-accent);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: .65;
}
.tl-empty {
  padding: 25px;
  position: sticky;
  left: 0;
  max-width: 500px;
}
.tl-inspector {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--tl-border);
  min-width: 0;
  min-height: 0;
  background: var(--tl-bg);
}
.tl-inspector > .tl-panel-heading {
  padding: 12px 15px;
  border-bottom: 1px solid var(--tl-border);
}
.tl-inspector-content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 15px;
}
.tl-inspector-date {
  font-size: 12px;
  color: var(--tl-accent);
}
.tl-inspector section {
  margin-top: 15px;
  border-top: 1px solid var(--tl-border);
  padding-top: 4px;
}
.tl-inspector section .tl-text-button {
  display: block;
  width: 100%;
  margin: 3px 0;
}
.tl-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tl-inspector dl {
  font-size: 12px;
}
.tl-inspector dt {
  color: var(--tl-muted);
  margin-top: 8px;
}
.tl-inspector dd {
  margin: 3px 0;
  overflow-wrap: anywhere;
}
.tl-prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tl-current {
  padding: 9px;
  border: 1px solid var(--tl-border);
  border-radius: 7px;
  background: var(--tl-panel);
}
.tl-current h4 {
  margin-top: 0;
}
.tl-legend {
  display: grid;
  gap: 8px;
  margin-top: 25px;
  font-size: 12px;
  color: var(--tl-muted);
}
.tl-primary {
  background: var(--color-accent,var(--tl-accent,#909bf5)) !important;
  color: var(--color-on-accent,#151723) !important;
  font-weight: 650;
}
.tl-danger {
  color: var(--color-danger-text,#f4a0a0) !important;
}
.tl-error {
  margin: 8px 15px;
  color: var(--color-danger-text,#ffb4b4);
  background: color-mix(in srgb, #dc5555 10%, var(--tl-bg));
  border: 1px solid #c9656577;
  border-radius: 6px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.tl-error button {
  display: block;
  margin-top: 8px;
}
.tl-inspector .tl-error {
  margin: 8px 0;
}
.tl-notice {
  padding: 8px 15px;
  margin: 0 !important;
  background: color-mix(in srgb, var(--tl-accent) 9%, var(--tl-bg));
  color: var(--tl-muted);
  font-size: 12px;
}
.tl-messages {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 20%;
  overflow: auto;
  overscroll-behavior: contain;
}
.tl-unplaced {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  border-top: 1px solid var(--tl-border);
  background: var(--tl-panel);
}
.tl-unplaced[open] {
  flex-shrink: 1;
  max-height: 35%;
  overflow: auto;
  overscroll-behavior: contain;
}
.tl-unplaced > summary {
  cursor: pointer;
  font-size: 12px;
  padding: 10px 14px;
  position: sticky;
  top: 0;
  background: var(--tl-panel);
  z-index: 1;
}
.tl-unplaced-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 8px;
  padding: 8px 12px 12px;
}
.tl-unplaced-item {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  white-space: normal;
}
.tl-unplaced-item strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.tl-unplaced-item span {
  font-size: 11px;
  color: var(--tl-muted);
}
.tl-list-wrap {
  overflow: auto;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
}
.tl-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tl-list caption {
  text-align: left;
  padding: 14px;
  color: var(--tl-muted);
  font-size: 12px;
}
.tl-list th {
  position: sticky;
  top: 0;
  background: var(--tl-panel);
  z-index: 1;
  text-align: left;
}
.tl-list td,
.tl-list th {
  border-bottom: 1px solid var(--tl-border);
  padding: 10px;
  vertical-align: top;
}
.tl-list tr.is-selected td {
  background: color-mix(in srgb, var(--tl-accent) 13%, var(--tl-bg));
}
.tl-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  flex-wrap: wrap;
}
.tl-editor,
.tl-editor > [data-tl-form] {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.tl-editor-content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 15px;
}
.tl-editor fieldset {
  margin: 10px 0 14px;
  border: 1px solid var(--tl-border);
  padding: 10px;
  border-radius: 6px;
  min-width: 0;
}
.tl-editor legend {
  font-size: 11px;
  color: var(--tl-muted);
  padding: 0 4px;
}
.tl-editor .tl-date-fields {
  margin: 7px 0;
}
.tl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.tl-editor .tl-grid-3 input {
  padding: 5px;
  min-width: 0;
}
.tl-editor details {
  margin: 12px 0;
}
.tl-editor summary {
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}
.tl-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 15px;
  border-top: 1px solid var(--tl-border);
  background: var(--tl-bg);
}
.tl-editor-actions > button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tl-editor-actions [data-tl-action="confirm-save"] {
  flex: 1 1 100%;
}
.tl-editor-actions :is([data-tl-action="back-preview"], [data-tl-action="cancel-edit"]) {
  flex: 1 1 auto;
}
.tl-review-changes {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.tl-review-change {
  border-top: 1px solid var(--tl-border);
  padding-block: 12px;
  overflow-wrap: anywhere;
}
.tl-review-change h5 { margin: 0; font-size: 13px; }
.tl-review-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-review-value { min-width: 0; }
.tl-review-date, .tl-review-position-meta { display: block; }
.tl-review-position-meta { font-size: 11px; color: var(--tl-muted); margin-top: 4px; }
.tl-review-diagnostics { border-top: 1px solid var(--tl-border); padding-block: 8px; }
.tl-review-diagnostics > summary { min-height: 44px; overflow-wrap: anywhere; }
.tl-review-diagnostic-content { max-height: 240px; overflow: auto; overflow-wrap: anywhere; }
.tl-review-summary { color: var(--tl-muted); }
.tl-review-edited { display: block; margin-top: 4px; color: var(--tl-muted); font-weight: normal; }
.tl-preview {
  border: 1px solid var(--tl-accent) !important;
  border-radius: 6px;
  padding: 10px !important;
}
.tl-preview h4 {
  margin-top: 0;
}
.tl-preview button {
  margin: 4px 3px 0 0;
}
.tl-help {
  flex: 0 0 auto;
  min-width: 0;
  border-top: 1px solid var(--tl-border);
  background: var(--tl-bg);
  color: var(--tl-muted);
  font-size: 11px;
}
.tl-help[open] {
  flex-shrink: 1;
  min-height: 0;
  max-height: 25%;
  overflow: auto;
}
.tl-help > summary {
  padding: 6px 15px;
  cursor: pointer;
}
.tl-keyboard-help {
  font-size: 10px;
  color: var(--tl-muted);
  margin: 0 !important;
  padding: 8px 15px;
  overflow-wrap: anywhere;
}
.tl-mobile {
  display: none;
}
.tl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0008;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tl-modal {
  --tl-border:var(--color-border,#424959);
  --tl-panel:var(--color-surface,#252a36);
  --tl-accent:var(--color-accent-text,#929cf5);
  --tl-muted:var(--color-text-muted,#abb2c6);
  color: var(--color-text,#e6e8ef);
  background: var(--color-bg,#1b1e28);
  border: 1px solid var(--tl-border);
  border-radius: 12px;
  padding: 24px;
  width: 430px;
  max-width: 100%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 20px 80px #0008;
}
.tl-modal h3 {
  margin-bottom: 16px;
}
.tl-modal form > div:last-child,
.tl-modal > div:last-child {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}
.tl-modal p {
  font-size: 13px;
  line-height: 1.6;
}
/* JS derives these states from the host, including its available height. */
.timeline-workspace[data-tl-layout="medium"] .tl-workspace-body {
  grid-template-columns: minmax(0, 1fr);
}
.timeline-workspace[data-tl-layout="wide"][data-tl-inspector="true"] .tl-workspace-body {
  grid-template-columns: 224px minmax(0, 1fr) 320px;
}
.timeline-workspace[data-tl-layout="medium"][data-tl-inspector="true"] .tl-workspace-body {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.timeline-workspace:is([data-tl-layout="narrow"], [data-tl-fullscreen="true"]) .tl-workspace-body {
  grid-template-columns: minmax(0, 1fr);
}
.timeline-workspace[data-tl-fullscreen="true"][data-tl-inspector] .tl-workspace-body {
  grid-template-columns: minmax(0, 1fr);
}
.timeline-workspace:is([data-tl-layout="medium"], [data-tl-layout="narrow"], [data-tl-fullscreen="true"]) .tl-filters:not(.responsive-surface),
.timeline-workspace:is([data-tl-layout="narrow"], [data-tl-fullscreen="true"]) .tl-inspector:not(.responsive-surface),
.timeline-workspace .tl-options:not(.responsive-surface),
.timeline-workspace[data-tl-inspector="false"] .tl-inspector {
  display: none;
}
.timeline-workspace .tl-header [data-tl-action="inspector"],
.timeline-workspace:is([data-tl-layout="medium"], [data-tl-layout="narrow"], [data-tl-fullscreen="true"]) .tl-header [data-tl-action="sidebar"] {
  display: inline-flex;
}
.timeline-workspace[data-tl-compact="true"] .tl-header {
  padding: 8px 10px;
}
.timeline-workspace :is(button, select, textarea, input:not([type="checkbox"]):not([type="radio"])) {
  min-height: 44px;
}
.timeline-workspace button,
.timeline-workspace .tl-lane-tools input[type="color"] {
  min-width: 44px;
}
.timeline-workspace .tl-lane-tools {
  flex-wrap: wrap;
}
.timeline-workspace :is(.tl-check, .tl-unplaced > summary, .tl-help > summary) {
  min-height: 44px;
}
.timeline-workspace[data-tl-compact="true"] .tl-heading {
  display: none;
}
.timeline-workspace[data-tl-layout="narrow"] .tl-primary-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 6px;
}
.timeline-workspace[data-tl-small="true"] .tl-primary-toolbar {
  grid-template-columns: minmax(0, 1fr) 115px;
}
.timeline-workspace[data-tl-small="true"] .tl-search {
  grid-column: 1 / -1;
  grid-row: 2;
}
.timeline-workspace[data-tl-small="true"] .tl-primary-toolbar .tl-search > span {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.timeline-workspace[data-tl-short="true"] .tl-header { padding-block: 6px; }
.timeline-workspace[data-tl-short="true"] .tl-primary-navigation { margin-top: 4px; }
.timeline-workspace[data-tl-short="true"] .tl-primary-toolbar .tl-field > span {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.timeline-workspace[data-tl-short="true"] .tl-unplaced[open] {
  max-height: min(56%, 140px, max(44px, calc(100% - 84px)));
}
.timeline-workspace[data-tl-short="true"] .tl-unplaced-item span {
  display: none;
}
.timeline-workspace[data-tl-short="true"] .tl-list :is(th, td) {
  padding-block: 4px;
}
.timeline-workspace[data-tl-short="true"] .tl-center:has(.tl-unplaced[open]) .tl-list caption {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
}
.timeline-workspace .tl-primary-navigation {
  gap: 4px;
  margin-top: 6px;
}
.timeline-workspace .tl-unplaced > summary,
.timeline-workspace .tl-help > summary {
  padding-block: 5px;
}

/* Surfaces stay in place for delegated events. No ancestor establishes a
   transformed/isolated containing block or clips these fixed panels. */
[data-timeline-feature-host]:has(.responsive-surface),
.timeline-workspace:has(.responsive-surface),
.tl-workspace-body:has(.responsive-surface) {
  overflow: visible;
}
.timeline-workspace :is(.tl-filters, .tl-inspector, .tl-options).responsive-surface {
  position: fixed !important;
  z-index: 81 !important;
  inset: auto !important;
  top: var(--tl-surface-top, var(--app-viewport-top, 0px)) !important;
  right: auto !important;
  left: calc(var(--tl-surface-left, 0px) + var(--tl-surface-width, 100vw) - min(440px, var(--tl-surface-width, 100vw))) !important;
  width: min(440px, var(--tl-surface-width, 100vw)) !important;
  height: var(--tl-surface-height, var(--app-viewport-height, 100dvh));
  max-height: var(--tl-surface-height, var(--app-viewport-height, 100dvh)) !important;
  min-width: 0 !important;
  min-height: 0;
  margin: 0;
  border: 1px solid var(--tl-border);
  border-radius: 12px;
  background: var(--tl-bg);
  color: var(--tl-text);
  box-shadow: var(--shadow-dialog, 0 20px 80px #0008);
  overscroll-behavior: contain;
}
.timeline-workspace .tl-filters.responsive-surface {
  display: block;
  left: var(--tl-surface-left, 0px) !important;
  right: auto !important;
}
.timeline-workspace .tl-inspector.responsive-surface {
  display: flex;
  padding: 0;
}
.timeline-workspace .tl-options.responsive-surface {
  display: block;
  overflow: auto;
  padding: 12px 15px;
}
.timeline-workspace .responsive-surface > .tl-panel-heading {
  display: flex;
  flex-shrink: 0;
  background: var(--tl-bg);
}
.timeline-workspace :is(.tl-filters, .tl-options).responsive-surface > .tl-panel-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: 12px;
  padding-block: 4px 8px;
  border-bottom: 1px solid var(--tl-border);
}
.timeline-workspace .responsive-surface .tl-mobile {
  display: inline-flex;
}
.timeline-workspace .responsive-surface-backdrop,
.timeline-workspace .responsive-surface-backdrop:hover {
  position: fixed;
  z-index: 80;
  inset: var(--app-viewport-top, 0px) auto auto var(--app-viewport-left, 0px);
  width: var(--app-viewport-width, 100vw);
  height: var(--app-viewport-height, 100dvh);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-overlay, #0008);
  cursor: default;
}
.timeline-workspace[data-tl-fullscreen="true"] :is(.tl-filters, .tl-inspector, .tl-options).responsive-surface {
  top: calc(var(--app-viewport-top, 0px) + var(--safe-top, 0px)) !important;
  left: calc(var(--app-viewport-left, 0px) + var(--safe-left, 0px)) !important;
  right: auto !important;
  width: calc(var(--app-viewport-width, 100vw) - var(--safe-left, 0px) - var(--safe-right, 0px)) !important;
  height: calc(var(--app-viewport-height, 100dvh) - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  max-height: calc(var(--app-viewport-height, 100dvh) - var(--safe-top, 0px) - var(--safe-bottom, 0px)) !important;
  border: 0;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .timeline-workspace * {
    transition: none !important;
  }
}
/* The tablet rail must also fit the short timeline viewport. The desktop
   topbar centering rule otherwise places Inicio above the visible area. */
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 480px) {
  .project-shell:has(.timeline-workspace) > .project-topbar > .workspace-nav {
    justify-content: flex-start;
    gap: 4px;
    padding-block: 6px;
  }
  .project-shell:has(.timeline-workspace) .workspace-nav > .workspace-nav-item,
  .project-shell:has(.timeline-workspace) .workspace-nav .workspace-nav-trigger {
    min-height: 54px;
  }
  .project-shell:has(.timeline-workspace) .workspace-nav :is(button.workspace-nav-item, .workspace-nav-trigger) {
    padding-block: 4px;
  }
}
@media (pointer: coarse) {
  .timeline-workspace :is(button, select, textarea, input:not([type="checkbox"]):not([type="radio"])) {
    min-height: 44px;
  }
  .timeline-workspace button,
  .timeline-workspace .tl-lane-tools input[type="color"] {
    min-width: 44px;
  }
  .timeline-workspace .tl-lane-tools {
    flex-wrap: wrap;
  }
  .timeline-workspace :is(.tl-check, .tl-unplaced > summary, .tl-help > summary) {
    min-height: 44px;
  }
}
.timeline-workspace .tl-map-thumbnail {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 5px;
  background: var(--tl-panel);
}
.tl-map-thumbnail img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 3px;
}
/* The historical line has one axis: filters are a drawer, never a name column. */
.timeline-workspace[data-tl-representation="timeline"] .tl-workspace-body {
  grid-template-columns: minmax(0, 1fr);
}
.timeline-workspace[data-tl-representation="timeline"]:is([data-tl-layout="wide"], [data-tl-layout="medium"])[data-tl-inspector="true"]:not([data-tl-fullscreen="true"]) .tl-workspace-body {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.timeline-workspace[data-tl-representation="timeline"] .tl-filters:not(.responsive-surface),
.timeline-workspace[data-tl-representation="timeline"] .tl-filters :is([data-tl-pin], [data-tl-move]),
.timeline-workspace[data-tl-representation="timeline"] [data-tl-action="toggle-connectors"],
.timeline-workspace[data-tl-representation="timeline"] label:has([data-tl-setting="connectors"]) {
  display: none;
}
.timeline-workspace[data-tl-representation="timeline"] .tl-header [data-tl-action="sidebar"] {
  display: inline-flex;
}
.tl-primary-navigation [name="representation-filter"] {
  flex: 1 1 150px;
  width: auto;
  min-width: 0;
  max-width: 220px;
  padding: 8px;
  color: var(--tl-text);
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-radius: 6px;
  font: inherit;
}
.tl-empty-state{padding:clamp(24px,6vw,64px);text-align:center;max-width:720px;margin:auto}.tl-empty-state h3{margin:0 0 12px}.tl-empty-state p{line-height:1.6;color:var(--color-text-muted)}.tl-empty-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}

/* One time axis, with annotation bands. The camera changes dates, never fonts. */
.tl-historical {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--tl-text);
  background: var(--tl-bg);
}
.tl-historical-plot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tl-accent) 3%, transparent), transparent 70%);
}
.tl-historical-plot:active { cursor: grabbing; }
.tl-historical-drawing { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.tl-historical-axis line { stroke: var(--tl-border); stroke-width: 2; }
.tl-historical-axis path { stroke: var(--tl-muted); stroke-width: 1; }
.tl-historical-axis text { fill: var(--tl-muted); font-family: inherit; font-size: 11px; font-weight: 400; }
.tl-historical-label-mask { fill: var(--tl-bg); stroke: none; }
.tl-historical-connection { stroke: var(--tl-historical-color); fill: none; stroke-width: 1.2; }
.tl-historical-connection > path { opacity: .65; }
.tl-historical-connection circle { fill: var(--tl-bg); stroke-width: 2.5; }
.tl-historical-connection.is-selected circle { fill: var(--tl-historical-color); stroke: var(--tl-bg); stroke-width: 2; }
.tl-historical-duration { fill: var(--tl-historical-color); stroke: none; opacity: .65; }
.tl-historical-uncertainty { fill: var(--tl-historical-color); stroke: var(--tl-historical-color); stroke-dasharray: 3 3; opacity: .18; }
.tl-historical-connection .tl-historical-open-end { stroke-width: 2; opacity: 1; }
.timeline-workspace .tl-historical-node {
  position: absolute;
  display: block;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tl-historical-color) 45%, var(--tl-border));
  border-top: 3px solid var(--tl-historical-color);
  border-radius: 9px;
  background: var(--tl-panel);
  color: var(--tl-text);
  font: inherit;
  text-align: left;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tl-text) 6%, transparent);
  cursor: pointer;
  overflow: visible;
}
.tl-historical-node::after {
  content: "";
  position: absolute;
  left: var(--tl-historical-pin-x);
  top: var(--tl-historical-pin-y);
  width: 44px;
  height: 44px;
}
.timeline-workspace .tl-historical-node:hover { background: color-mix(in srgb, var(--tl-historical-color) 8%, var(--tl-panel)); }
.timeline-workspace .tl-historical-node.is-selected { outline: 2px solid var(--tl-accent); outline-offset: 3px; }
.tl-historical-card-content { display: block; height: 100%; padding: 8px 10px; overflow: hidden; border-radius: 6px; }
.tl-historical-kind { display: block; color: var(--tl-muted); font-size: 10px; line-height: 14px; }
.tl-historical-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 17px; font-weight: 650; overflow-wrap: anywhere; }
.tl-historical-date { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--tl-muted); font-size: 11px; line-height: 15px; margin-top: 4px; overflow-wrap: anywhere; }
.tl-historical-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--tl-text); font-size: 12px; line-height: 17px; margin-top: 8px; overflow-wrap: anywhere; }
.tl-historical-thumbnail { float: right; width: 70px; height: 54px; object-fit: cover; border: 1px solid var(--tl-border); border-radius: 4px; margin: 8px 0 4px 8px; }
.tl-historical-node[data-detail="milestone"] .tl-historical-kind { display: none; }
.tl-historical-node[data-detail="cluster"] { text-align: center; border-radius: 12px; }
.tl-historical-node[data-detail="cluster"] .tl-historical-card-content { padding: 5px 6px; }
.tl-historical-count { display: inline; font-size: 19px; font-weight: 750; line-height: 24px; }
.tl-historical-group-label { margin-left: 5px; font-size: 11px; }
.tl-historical-node[data-detail="cluster"] .tl-historical-date { font-size: 10px; line-height: 13px; margin-top: 2px; }
.tl-historical-node.is-compact .tl-historical-kind,
.tl-historical-node.is-compact .tl-historical-date,
.tl-historical-node.is-compact .tl-historical-summary,
.tl-historical-node.is-compact .tl-historical-thumbnail,
.tl-historical-node.is-compact .tl-historical-group-label { display: none; }
.tl-historical-node.is-compact .tl-historical-card-content { display: flex; align-items: center; justify-content: center; padding: 4px; }
.tl-historical-node.is-compact .tl-historical-title { font-size: 11px; line-height: 15px; }
.tl-historical-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  height: 50px;
  flex: 0 0 50px;
  min-width: 0;
  border-top: 1px solid var(--tl-border);
  background: var(--tl-panel);
}
.timeline-workspace .tl-historical-controls button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 5px 9px; white-space: nowrap; }
.tl-historical-instruction { margin-left: auto; color: var(--tl-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-historical-overview { position: relative; height: 44px; flex: 0 0 44px; min-width: 44px; overflow: hidden; background: var(--tl-panel); cursor: pointer; touch-action: none; }
.tl-historical-overview-track { position: absolute; top: 5px; left: 0; right: 0; height: 8px; background: color-mix(in srgb, var(--tl-accent) 10%, var(--tl-bg)); border-top: 1px solid var(--tl-border); border-bottom: 1px solid var(--tl-border); }
.tl-historical-overview-window { position: absolute; top: 3px; height: 12px; min-width: 3px; max-width: 100%; border: 1px solid var(--tl-accent); border-radius: 3px; background: color-mix(in srgb, var(--tl-accent) 25%, transparent); cursor: grab; }
.tl-historical-overview-start,.tl-historical-overview-end { position: absolute; bottom: 2px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 13px; color: var(--tl-muted); pointer-events: none; }
.tl-historical-overview-start { left: 8px; }
.tl-historical-overview-end { right: 8px; }
.tl-historical-empty { position: absolute; inset: 12px 16px auto; text-align: center; color: var(--tl-muted); font-size: 12px; pointer-events: none; }
@media (max-width: 800px) { .tl-historical-instruction { display: none; } }
@media (prefers-reduced-motion: no-preference) { .tl-historical-node { transition: background-color 120ms ease, outline-color 120ms ease; } }

.project-main:has([data-maps-feature-host]) { padding: 0; min-height: 0; overflow: hidden; }
[data-maps-feature-host] { display: flex; flex: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.maps-workspace { --map-panel-width: 294px; display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; height: 100%; width: 100%; overflow: hidden; color: var(--color-text); background: var(--color-bg); }
.maps-workspace button, .map-dialog button { touch-action: manipulation; }
.maps-workspace .btn { flex-shrink: 0; min-height: var(--control-size, 36px); }
.map-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex: 0 0 auto; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.map-heading { flex: 1; min-width: 0; }
.map-heading h2 { margin: 0; font: 600 20px/1.3 var(--font-reading, Georgia, serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-heading [role="status"] { display: block; font-size: 12px; color: var(--color-text-secondary); min-height: 16px; }
.map-header-actions, .map-view-controls, .map-history, .map-tools { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.map-more { position: relative; }
.map-more > summary { list-style: none; cursor: pointer; }
.map-more > div { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 230px; max-height: min(440px, 65vh); overflow: auto; background: var(--color-surface); box-shadow: var(--shadow-popover); border: 1px solid var(--color-border-strong); border-radius: 8px; padding: 5px; display: grid; gap: 2px; }
.map-more > div .btn { white-space: normal; text-align: left; justify-content: flex-start; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 12px; flex: 0 0 auto; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.map-tools { gap: 3px; }
.map-tools .btn { border-color: transparent; padding: 5px 9px; }
.map-tools [aria-pressed="true"], .maps-workspace .segmented-control [aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.map-view-controls { margin-left: auto; flex-shrink: 0; }
.map-view-controls .map-field { flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.map-view-controls .map-field select { width: min(170px, 26vw); min-height: var(--control-size, 36px); }
.map-workarea { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
.map-stage { position: relative; flex: 1; min-height: 120px; min-width: 0; overflow: hidden; background: var(--color-surface-hover, var(--color-bg)); touch-action: none; }
.map-stage > svg { width: 100%; height: 100%; display: block; outline-offset: -3px; touch-action: none; user-select: none; -webkit-user-select: none; }
[data-mode="explore"] .map-stage { cursor: grab; }
[data-tool="terrain"] .map-stage, [data-tool="symbol"] .map-stage, [data-tool="place"] .map-stage, [data-tool="path"] .map-stage, [data-tool="text"] .map-stage { cursor: crosshair; }
.map-stage:active { cursor: grabbing; }
.map-object { outline: none; }
.map-object:focus-visible { filter: drop-shadow(0 0 3px #3267a5); }
[data-mode="explore"] .map-object, [data-tool="select"] .map-object { cursor: pointer; }
.map-inspector { display: none; width: var(--map-panel-width); flex: 0 0 var(--map-panel-width); min-width: 0; min-height: 0; background: var(--color-surface); border-left: 1px solid var(--color-border); flex-direction: column; overflow: hidden; }
[data-panel="true"] .map-inspector { display: flex; }
.map-panel-heading { padding: 10px 12px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; }
.map-panel-heading h3 { font-size: 14px; margin: 0; flex: 1; min-width: 0; }
.map-panel-heading .btn { font-size: 12px; padding: 4px 7px; }
.map-panel-content { padding: 14px; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.map-panel-content h4 { margin: 4px 0 12px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.map-panel-content section { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-border); }
.map-field { display: flex; flex-direction: column; min-width: 0; gap: 5px; margin-bottom: 12px; font-size: 13px; }
.map-field > span { line-height: 1.4; }
.map-field input, .map-field select, .map-gallery-search input { width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--control-size, 36px); padding: 6px 9px; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 6px; }
.map-field input[type="range"] { padding: 0; accent-color: var(--color-accent); border: none; background: transparent; }
.map-help, .map-legacy-note { color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; margin: 4px 0 10px; overflow-wrap: anywhere; }
.map-legacy-note { padding: 5px 16px; margin: 0; background: var(--color-surface); flex: 0 0 auto; }
.map-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 11px; line-height: 1.5; padding: 5px 14px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); flex: 0 0 auto; }
.map-list-row { width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; padding: 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--color-text); min-height: 40px; overflow-wrap: anywhere; }
.map-list-row:hover { background: var(--color-surface-hover); }
.map-list-row.is-selected { border-color: var(--color-accent); background: var(--color-accent-bg); }
.map-list-row small { font-size: 11px; color: var(--color-text-secondary); }
.map-check { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; margin: 8px 0 14px; font-size: 13px; }
.map-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--color-accent); flex: 0 0 16px; }
.map-all-objects { max-height: 220px; display: flex; flex-direction: column; gap: 4px; overflow: auto; margin-top: 10px; }
.map-all-objects button, .map-tracking-steps button { border: 0; background: transparent; color: var(--color-accent); padding: 7px 4px; text-align: left; overflow-wrap: anywhere; min-height: var(--control-size, 36px); }
.map-tracking-steps article { display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid var(--color-border); padding: 7px 0; font-size: 12px; gap: 3px; }
.map-tracking-steps small { color: var(--color-text-secondary); }
.map-tracking-status { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.map-message { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-size: 13px; flex-wrap: wrap; flex: 0 0 auto; max-height: 160px; overflow: auto; }
.map-message > span { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.map-message .btn { font-size: 12px; }
.map-error { border-left: 4px solid var(--color-danger, #b23c34); }
.maps-gallery { flex: 1; padding: 28px clamp(16px, 3vw, 44px); overflow: auto; min-height: 0; }
.maps-gallery header h2 { font: 600 32px/1.2 var(--font-reading, Georgia, serif); margin: 3px 0 10px; }
.maps-gallery header p { color: var(--color-text-secondary); }
.map-start-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 25px 0; max-width: 1100px; }
.map-start-options .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 20px; min-height: 140px; gap: 9px; border: 1px solid var(--color-border-strong); background: var(--color-surface); border-radius: 10px; white-space: normal; }
.map-start-options .btn:first-child { border-color: var(--color-accent); }
.map-start-options .btn strong { font: 600 18px/1.25 var(--font-reading, Georgia, serif); }
.map-start-options .btn span { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.map-start-options .btn:hover { background: var(--color-surface-hover); }
.map-gallery-search { display: block; max-width: 400px; margin: 20px 0; }
.map-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%), 1fr)); gap: 18px; }
.map-card { display: flex; flex-direction: column; text-align: left; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); background: var(--color-surface); }
.map-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.map-card-preview { width: 100%; aspect-ratio: 3/2; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: var(--color-surface-hover); color: var(--color-text-secondary); font-size: 12px; overflow: hidden; }
.map-card-preview img { width: 100%; height: 100%; object-fit: contain; }
.map-card-label { padding: 13px 15px; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; gap: 6px; }
.map-card-label strong { overflow-wrap: anywhere; }
.map-card-label span { color: var(--color-text-secondary); font-size: 12px; }
.map-empty { margin-top: 48px; max-width: 520px; }
.map-empty h3 { font: 500 24px/1.4 var(--font-reading, Georgia, serif); }
.map-empty p { color: var(--color-text-secondary); line-height: 1.7; }
.map-dialog { width: min(540px, calc(100vw - 28px)); max-height: calc(var(--app-viewport-height, 100dvh) - 32px); padding: 0; overflow: hidden; }
.map-dialog form { display: flex; flex-direction: column; max-height: calc(var(--app-viewport-height, 100dvh) - 34px); min-height: 0; }
.map-dialog h2 { font-size: 20px; padding: 18px 22px; margin: 0; border-bottom: 1px solid var(--color-border); }
.map-dialog-fields { padding: 20px 22px 8px; overflow: auto; min-height: 0; }
.map-dialog-actions { padding: 14px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--color-border); flex: 0 0 auto; }
.map-date-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.map-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.map-creation-preview, .map-export-preview { width: 100%; aspect-ratio: 3/2; background: var(--color-bg); margin-bottom: 16px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 5px; }
.map-creation-preview svg, .map-export-preview svg, .map-export-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.map-dialog:has(.map-creation-preview) { width: min(900px, calc(100vw - 28px)); }
.map-dialog:has(.map-creation-preview) .map-dialog-fields { padding-top: 12px; }
.map-object-pagination { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12px; margin-top: 8px; }
@media (max-width: 1199px) {
  .map-header { padding: 8px 10px; gap: 8px; }
  .map-header-actions { gap: 4px; }
  .map-tools .btn { font-size: 12px; padding: 5px 7px; }
  .map-start-options { gap: 10px; }
  .map-start-options .btn { padding: 15px; }
}
@media (max-width: 899px) {
  .map-inspector { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, calc(100% - 24px)); z-index: 40; box-shadow: var(--shadow-dialog); }
  .map-inspector.responsive-surface { position: fixed; top: var(--safe-top, 0px); bottom: var(--safe-bottom, 0px); right: var(--safe-right, 0px); max-height: var(--app-viewport-height, 100dvh); width: min(360px, calc(100vw - 24px)); }
  .map-footer { display: none; }
}
@media (max-width: 767px) {
  .maps-gallery { padding: 20px 15px; }
  .maps-gallery header h2 { font-size: 27px; }
  .map-start-options { grid-template-columns: 1fr; margin: 18px 0; gap: 8px; }
  .map-start-options .btn { min-height: 75px; display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; padding: 12px 15px; }
  .map-start-options .btn > svg { grid-row: span 2; align-self: center; }
  .map-start-options .btn strong { font-size: 17px; }
  .map-start-options .btn span { grid-column: 2; }
  .map-heading h2 { font-size: 17px; }
  .map-header { flex-wrap: wrap; gap: 6px; }
  .map-header > .btn { padding: 5px 7px; }
  .map-header-actions { margin-left: auto; }
  .map-header-actions .btn { font-size: 12px; padding: 5px 8px; }
  .map-header-actions > .btn > svg { display: none; }
  .map-header-actions > .btn > span { display: inline; }
  .map-toolbar { gap: 4px; padding: 5px; }
  .map-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; gap: 1px; }
  .map-tools .btn { min-width: 0; padding: 5px 3px; font-size: 11px; }
  .map-history { gap: 2px; }
  .map-view-controls { gap: 3px; }
  .map-view-controls .btn { padding: 5px 8px; font-size: 12px; }
  .map-toolbar > .map-help { display: none; }
  .map-view-controls .map-field span { display: none; }
  .map-view-controls .map-field select { width: min(130px, 31vw); }
  .map-field input:not([type="range"]), .map-field select, .map-gallery-search input { font-size: 16px; }
  .map-legacy-note { padding: 4px 10px; font-size: 11px; }
  .map-empty { margin-top: 24px; }
  .map-message { padding: 6px 10px; font-size: 12px; max-height: 116px; }
  .map-more > div { position: fixed; top: auto; right: 10px; max-height: 55vh; }
}
@media (pointer: coarse), (max-width: 1199px) {
  .maps-workspace button, .maps-workspace summary, .map-dialog button { min-height: 44px; }
  .map-field input, .map-field select, .map-gallery-search input { min-height: 44px; }
}
@media (max-height: 500px) {
  .map-header { padding-top: 4px; padding-bottom: 4px; }
  .map-heading [role="status"] { display: inline; }
  .map-legacy-note, .map-footer { display: none; }
  .map-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .map-tools { display: flex; width: auto; flex-shrink: 0; }
  .map-view-controls { flex-wrap: nowrap; }
}
@media (forced-colors: active) {
  .map-card, .map-stage, .map-inspector { border: 1px solid CanvasText; }
  .map-tools [aria-pressed="true"] { outline: 2px solid Highlight; }
}

@layer base, components;
@layer base {
  :root { color-scheme: light; --paper:#fbfaf7; --surface:#fff; --soft:#f1f0eb; --ink:#26372e; --muted:#68736a; --line:#dddeda; --green:#365e45; --green-soft:#e8eee6; --danger:#9e3838; --shadow:0 16px 60px #20312614; font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  * { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); } button,input,select,textarea { font:inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.55; } button,input,select,textarea { border:1px solid var(--line); border-radius:9px; } button { min-height:42px; padding:8px 13px; background:var(--surface); color:var(--ink); } button:hover { background:var(--soft); } input,textarea,select { width:100%; padding:11px 12px; background:var(--surface); color:var(--ink); } textarea { resize:vertical; } input[type=checkbox] { width:auto; accent-color:var(--green); } :focus-visible { outline:3px solid #749778; outline-offset:2px; } h1,h2,h3,p { margin:0 0 16px; } h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(30px,4vw,44px); line-height:1.15; letter-spacing:-1px; } h2 { font-size:21px; } a { color:var(--green); } label { display:grid; gap:6px; font-weight:600; font-size:13px; } small { font-size:12px; } [hidden] { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}

@layer ruda-reader {
  [hidden] { display:none !important; }
  .brand-symbol { width:1em;height:1em;display:block; }
  button,select,.tree-item,.sidebar-heading button,.editor-toolbar button { min-height:44px;min-width:44px; }
  :focus-visible { outline:2px solid #46704e; outline-offset:3px; }
  .workspace { height:var(--workspace-height,100dvh); }
  .project-context { display:flex;flex-direction:column;min-width:0;gap:2px; }
  .continuity-label { color:var(--muted);font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
  .continuity-label:empty { display:none; }
  .module-nav { display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:20px; }
  .module-nav button { font-size:12px;background:transparent; }
  .module-nav [aria-current] { background:var(--green-soft); }
  .editor-area:has(.inspector) { display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto minmax(0,1fr) auto; }
  .editor-area:has(.inspector) .editor-toolbar { grid-column:1 / -1;grid-row:1; }
  .editor-area:has(.inspector) .scene-heading { grid-column:1;grid-row:2; }
  .editor-area:has(.inspector) #editor-host { grid-column:1;grid-row:3; }
  .editor-area:has(.inspector) .editor-footer { grid-column:1 / -1;grid-row:4; }
  .inspector { grid-column:2;grid-row:2 / 4;grid-template-columns:1fr;align-content:start;max-height:none;border-left:1px solid var(--line);border-top:0;padding:16px; }
  .inspector-close { justify-self:end; }
  .reading-mode [data-add-scene],.reading-mode [data-add-folder],.reading-mode [data-project-title],.reading-mode .editor-footer { display:none; }
  .reader-controls,.reader-settings,.reader-search { display:flex;gap:8px;align-items:center;padding:8px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap; }
  .reader-index { flex:1;min-width:100px;max-width:340px; }
  .reader-index select { width:100%;text-overflow:ellipsis; }
  .reader-settings label { min-width:100px;flex:1; }
  .reader-search label { flex:1; }
  .reader-search output { font-size:12px; }
  .reader { padding:24px;overscroll-behavior:contain;font-size:var(--reader-size,19px);line-height:var(--reader-line,1.85);background:#fbfcf8;color:#29372d; }
  .reader-column { max-width:var(--reader-width,720px);margin:auto;overflow-wrap:anywhere; }
  .reader-column section+section { padding-top:40px;margin-top:40px;border-top:1px solid currentColor; }
  .reader[data-theme=dark] { background:#202724;color:#e4e9df; }
  .reader[data-theme=sepia] { background:#f2e7d1;color:#50432e; }
  .reader img { max-width:100%;height:auto; }
  .reader mark { background:#f3dc85;color:#302b1e; }
  @media(max-width:800px) {
    .editor-area:has(.inspector) { display:flex; }
    .workspace .topbar { padding:4px 10px;gap:4px;min-height:52px; }
    .workspace .topbar .brand { font-size:20px;padding:4px; }
    .workspace .topbar .project-title { font-size:16px;flex:1;max-width:none;min-width:0; }
    .workspace .project-context { flex:1; }
    .workspace .topbar .status { order:10;flex-basis:100%;justify-content:flex-start;padding:0 4px 4px; }
    .workspace .topbar [data-devices],.workspace .topbar [data-lock] { padding:4px 7px;font-size:12px; }
    .editor-toolbar { padding:4px 10px; }
    .editor-toolbar .secondary-action { display:none; }
    .editor-toolbar.more-open .secondary-action { display:flex; }
    .editor-toolbar.more-open .node-actions { flex-basis:100%; }
    .reader-controls { padding:4px 10px;gap:4px; }
    .reader-controls button { padding:4px 9px; }
    .reader-index { max-width:none;min-width:80px;flex:1 1 0; }
    .reader-index select { min-width:0; }
    .reader { padding:16px 20px; }
    .scene-heading { padding-top:14px; }
    .inspector { position:absolute;bottom:0;left:0;right:0;z-index:5;max-height:65%;border-top:1px solid var(--line);box-shadow:0 -5px 20px #172d2526; }
  }
}
@layer components {
  .brand { font:600 28px/1 Georgia,serif; letter-spacing:-1px; display:inline-flex; align-items:center; gap:6px; color:var(--green); } .brand span { font:25px system-ui; } .eyebrow { text-transform:uppercase; letter-spacing:2px; color:var(--muted); font-size:11px; font-weight:700; margin-bottom:14px; } .muted { color:var(--muted); } .primary { background:var(--green); border-color:var(--green); color:#fff; } .primary:hover { background:#294d36; color:#fff; } .quiet { background:transparent; border-color:transparent; } .danger { color:var(--danger); } .wide { width:100%; } .row { display:flex; gap:8px; align-items:center; } .row.wrap { flex-wrap:wrap; } .spacer { flex:1; } .stack { display:grid; gap:16px; } .boot { min-height:100dvh; display:grid; place-content:center; text-align:center; gap:20px; } .boot .brand { justify-content:center; }
  .auth-shell { min-height:100dvh; display:grid; grid-template-columns:minmax(250px,1fr) minmax(360px,1fr); } .auth-aside { background:#e8eee5; padding:48px clamp(30px,6vw,90px); display:flex; flex-direction:column; justify-content:space-between; } .auth-aside h1 { max-width:430px; font-size:clamp(40px,5vw,66px); margin-top:70px; } .auth-aside p { max-width:380px; color:#4f6758; } .auth-aside footer { padding-top:60px; color:#5e7362; font-size:12px; } .auth-form { max-width:470px; width:100%; padding:44px; margin:auto; } .auth-form h1 { font-size:32px; } .auth-form form { margin-top:28px; } .checkline { display:flex; align-items:flex-start; gap:9px; font-weight:400; line-height:1.45; } .checkline input { margin:4px 0; flex-shrink:0; } .notice { background:var(--green-soft); border:1px solid #ccdac9; border-radius:10px; padding:12px 14px; font-size:13px; margin:12px 0; overflow-wrap:anywhere; } .notice.error { background:#fff0ed; border-color:#edc4bd; color:#8d332a; } .notice.warning { background:#fff7e3; border-color:#e6d29b; color:#6a501b; } .recovery-code { font:15px/1.7 ui-monospace,monospace; padding:18px; background:var(--soft); border-radius:10px; overflow-wrap:anywhere; user-select:all; }
  .topbar { min-height:74px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; padding:14px 30px; background:var(--paper); } .topbar .brand { font-size:25px; } .topbar .brand span { font-size:23px; } .topbar .status { margin-left:auto; } .status { font-size:12px; display:inline-flex; align-items:center; gap:6px; color:var(--muted); } .status::before { content:""; width:6px; height:6px; border-radius:50%; background:#6a8b62; } .status[data-state=pending]::before,.status[data-state=offline]::before { background:#b48c36; } .status[data-state=error]::before,.status[data-state=conflict]::before { background:#b6463d; } .status[data-state=syncing]::before { animation:pulse 1s infinite; } @keyframes pulse { 50% { opacity:.25; } }
  .library { max-width:1150px; margin:0 auto; padding:58px 30px; } .library-heading { display:flex; align-items:flex-end; gap:25px; margin-bottom:30px; } .library-heading h1 { margin-bottom:10px; } .library-heading p { margin:0; } .library-heading button { margin-left:auto; flex-shrink:0; } .library-search { max-width:420px; margin-bottom:28px; } .project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; } .project-card { text-align:left; min-height:200px; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); display:flex; flex-direction:column; transition:transform .15s,box-shadow .15s; } .project-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); background:var(--surface); } .project-card .book-mark { color:#57795d; font-size:26px; margin-bottom:24px; } .project-card h2 { font:25px/1.2 Georgia,serif; margin-bottom:10px; overflow-wrap:anywhere; } .project-card p { color:var(--muted); font-size:12px; margin-top:auto; margin-bottom:0; padding-top:14px; } .empty { padding:52px 24px; text-align:center; border:1px dashed #c4cec1; border-radius:14px; color:var(--muted); } .empty h2 { font-family:Georgia,serif; color:var(--ink); }
  .workspace { height:100dvh; display:flex; flex-direction:column; } .workspace .topbar { min-height:66px; padding:10px 20px; gap:12px; } .project-title { font:18px Georgia,serif; max-width:28vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .workspace-main { flex:1; min-height:0; display:grid; grid-template-columns:255px minmax(0,1fr); } .sidebar { background:#f2f3ed; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:22px 16px 16px; min-height:0; overflow:auto; } .sidebar-heading { padding:0 7px 12px; display:flex; align-items:center; } .sidebar-heading h2 { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin:0; color:var(--muted); } .sidebar-heading .spacer { min-width:10px; } .sidebar-heading button { min-height:34px; padding:4px 8px; } .tree-search { font-size:13px; padding:9px 10px; background:#fbfcf8; margin-bottom:15px; } .tree { flex:1; } .tree-item { width:100%; text-align:left; display:flex; align-items:center; gap:7px; border:0; background:transparent; padding:8px; border-radius:7px; min-height:39px; font-size:13px; } .tree-item:hover { background:#e5eae0; } .tree-item.active { background:#dce6d7; font-weight:600; color:#294c34; } .tree-item .node-icon { opacity:.6; flex-shrink:0; } .tree-item .node-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tree-item.folder { font-weight:600; } .sidebar-footer { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:7px; } .sidebar-footer button { text-align:left; font-size:13px; background:transparent; } .editor-area { min-width:0; display:flex; flex-direction:column; overflow:hidden; position:relative; } .editor-toolbar { padding:12px 24px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; } .editor-toolbar button { min-height:34px; padding:5px 10px; font-size:12px; } .editor-toolbar .active { background:var(--green-soft); color:var(--green); border-color:#c1d3be; } .editor-toolbar .node-actions { margin-left:auto; display:flex; gap:5px; } .scene-heading { padding:30px clamp(24px,5vw,80px) 8px; } .scene-heading h1 { font-size:30px; margin:0; } .scene-heading .eyebrow { margin-bottom:9px; } #editor-host { min-height:0; flex:1; padding:12px clamp(20px,5vw,76px) 20px; overflow:hidden; } #editor-host .cm-editor { height:100%; background:transparent; } #editor-host .cm-scroller { overflow:auto; font:18px/1.8 Georgia,"Times New Roman",serif; } #editor-host .cm-content { min-height:240px; padding:0 10px 35vh 2px; } #editor-host .cm-focused { outline:none; } #editor-host .cm-activeLine { background:transparent; } #editor-host .cm-gutters { display:none; } #editor-host .cm-line { padding:0; } .editor-footer { border-top:1px solid var(--line); padding:9px 24px; display:flex; gap:15px; font-size:11px; color:var(--muted); align-items:center; background:var(--paper); } .editor-footer .spacer { flex:1; } .reader { padding:24px clamp(24px,5vw,80px) 80px; overflow:auto; font:18px/1.85 Georgia,serif; flex:1; } .reader h1,.reader h2,.reader h3 { line-height:1.3; margin:25px 0 15px; } .reader table { border-collapse:collapse; max-width:100%; font:14px system-ui; } .reader td,.reader th { border:1px solid var(--line); padding:8px; } .reader pre { overflow:auto; font-size:13px; background:var(--soft); padding:15px; border-radius:8px; } .reader blockquote { margin-left:0; border-left:3px solid #b1c3aa; padding-left:20px; color:var(--muted); } .library-table-scroll { overflow:auto; }
  .inspector { border-top:1px solid var(--line); background:var(--surface); padding:18px 24px; display:grid; grid-template-columns:170px minmax(100px,1fr); gap:16px; max-height:40vh; overflow:auto; } .inspector textarea { min-height:85px; font-size:13px; } .inspector select { font-size:13px; } .mobile-toggle { display:none; } .workspace.focus .sidebar,.workspace.focus .scene-heading,.workspace.focus .topbar .project-title { display:none; } .workspace.focus .workspace-main { grid-template-columns:1fr; } .workspace.focus #editor-host { max-width:940px; width:100%; margin:auto; padding-top:45px; }
  dialog { width:min(640px,calc(100% - 28px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:16px; padding:0; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); } dialog::backdrop { background:#142d245c; backdrop-filter:blur(3px); } .dialog-head { display:flex; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); } .dialog-head h2 { margin:0; font:25px Georgia,serif; flex:1; } .dialog-head button { border:0; background:transparent; } .dialog-body { padding:24px; overflow:auto; } .dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--line); } .dialog-body .stack { gap:14px; } .device-row { display:flex; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); } .device-row:last-child { border:0; } .device-info { flex:1; overflow-wrap:anywhere; } .device-info strong { display:block; } .device-info small { color:var(--muted); } .reference-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:15px; } .reference-list { display:grid; gap:8px; max-height:50vh; overflow:auto; } .reference-record { padding:15px; background:var(--surface); border:1px solid var(--line); border-radius:9px; } .reference-record h3 { margin:0 0 8px; font-size:16px; } .reference-record p { margin:6px 0; white-space:pre-wrap; font-size:13px; } .reference-record details { font-size:12px; margin-top:10px; } .reference-record dl { margin:6px 0; } .reference-record dt { font-weight:600; margin-top:5px; } .reference-record dd { margin-left:0; white-space:pre-wrap; overflow-wrap:anywhere; } .toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:#263b2e; color:white; padding:12px 20px; border-radius:10px; box-shadow:var(--shadow); max-width:calc(100% - 30px); z-index:100; font-size:13px; } .conflict-choice { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; } .conflict-versions { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .conflict-versions pre { font:13px/1.5 system-ui; white-space:pre-wrap; overflow:auto; max-height:220px; padding:12px; background:var(--soft); border-radius:8px; }
  @media (max-width:800px) { .auth-shell { grid-template-columns:1fr; } .auth-aside { padding:25px; gap:16px; } .auth-aside h1 { margin:15px 0 0; font-size:35px; } .auth-aside p,.auth-aside footer { display:none; } .auth-form { padding:28px 24px; } .topbar { padding:12px 18px; gap:10px; } .topbar .status { font-size:11px; } .topbar .hide-mobile { display:none; } .library { padding:35px 20px; } .library-heading { align-items:flex-start; flex-direction:column; gap:15px; } .library-heading button { margin-left:0; } .workspace .topbar { padding:10px 12px; gap:6px; flex-wrap:wrap; } .workspace .topbar .status { flex:1; justify-content:flex-end; } .workspace .project-title { max-width:36vw; } .mobile-toggle { display:inline-flex; align-items:center; justify-content:center; } .workspace-main { grid-template-columns:1fr; position:relative; } .sidebar { display:none; position:absolute; z-index:20; inset:0 auto 0 0; width:min(300px,88vw); box-shadow:12px 0 30px #172d2526; } .workspace.menu-open .sidebar { display:flex; } .scene-heading { padding:23px 22px 8px; } .scene-heading h1 { font-size:26px; } .editor-toolbar { padding:9px 12px; gap:4px; } .editor-toolbar .node-actions { margin-left:0; } #editor-host { padding:12px 17px 12px; } #editor-host .cm-scroller { font-size:17px; } .editor-footer { padding:9px 14px; gap:8px; } .editor-footer .hide-mobile { display:none; } .inspector { padding:14px; grid-template-columns:1fr; gap:10px; max-height:45vh; } .reader { padding:20px 23px 50px; font-size:17px; } .dialog-body { padding:18px; } .dialog-head { padding:16px 18px; } .dialog-actions { padding:14px 18px; flex-wrap:wrap; } .conflict-versions { grid-template-columns:1fr; } }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
  .reference-map { overflow:auto; max-height:60vh; border:1px solid var(--line); border-radius:8px; margin-top:12px; }
  .reference-map svg { display:block; width:100%; height:auto; min-width:340px; }
  .reference-map-image { display:block; max-width:100%; height:auto; margin-top:12px; }
}

.universe-library { margin-top: 48px; }
.universe-library .library-heading h2 { font: 30px/1.2 Georgia, serif; margin-bottom: 8px; }
.universe-shell {
  height: var(--workspace-height, 100dvh);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
[data-universe-host], .universe-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.universe-heading, .universe-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px clamp(14px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.universe-heading h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); overflow-wrap: anywhere; }
.universe-heading .eyebrow { margin: 0 0 4px; }
.universe-heading > div { min-width: 0; }
.universe-more { position: relative; }
.universe-more summary { min-height: 42px; display: grid; place-items: center; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.universe-more > div { position: absolute; inset: calc(100% + 6px) 0 auto auto; z-index: 4; padding: 6px; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.universe-back-short { display: none; }
.universe-toolbar .universe-scope-label { min-width: min(240px, 100%); margin: 0; }
.universe-toolbar select { padding-block: 6px; }
.universe-draft-status:not(:empty) { padding: 4px 16px; font-size: 12px; background: var(--green-soft); color: var(--green); }
.universe-panel {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-surface-hover: var(--soft);
  --color-surface-raised: var(--surface);
  --color-surface-subtle: var(--soft);
  --color-border: var(--line);
  --color-border-strong: #bbc7bb;
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-text-secondary: var(--muted);
  --color-accent: var(--green);
  --color-accent-text: var(--green);
  --color-accent-bg: var(--green-soft);
  --color-accent-soft: var(--green-soft);
  --color-accent-soft-2: #dce6da;
  --color-on-accent: white;
  --color-danger: var(--danger);
  --color-danger-text: var(--danger);
  --color-overlay: #142d245c;
  --font-display: Georgia, serif;
  --font-reading: Georgia, serif;
  --radius-md: 9px;
  --radius-lg: 14px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-lg: 19px;
  --control-size: 36px;
  --shadow-popover: var(--shadow);
}
.universe-panel > .tl-workspace, .universe-panel > .maps-workspace { min-height: 100%; }
.universe-panel .btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.universe-panel .btn-primary { background: var(--green); color: white; border-color: var(--green); }
.universe-panel .btn-ghost { background: transparent; }
.universe-panel .btn-danger { color: var(--danger); }
.universe-panel .btn svg { flex: 0 0 auto; }
.universe-overview { margin: auto; width: min(1160px, 100%); padding: 20px clamp(14px, 3vw, 32px); }
.universe-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%),1fr)); gap: 16px; }
.universe-cards section { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); overflow-wrap: anywhere; }
.universe-cards section h2 { font: 24px/1.25 Georgia, serif; }
.universe-cards section > button { margin: 5px 6px 0 0; }
.universe-list { list-style: none; padding: 0; }
.universe-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 6px; border-bottom: 1px solid var(--line); }
.universe-list span { min-width: 0; overflow-wrap: anywhere; }
.universe-list button { flex: 0 0 auto; }
.universe-status:has(button:not([hidden])) { padding: 8px 16px; border-top: 1px solid var(--line); background: var(--paper); }
.export-selection { max-height: 45vh; overflow: auto; display: grid; gap: 7px; padding: 4px; }
.release-comparison { max-height: 35vh; overflow: auto; display: grid; gap: 6px; padding-block: 6px; }
.release-comparison summary { cursor: pointer; }
.map-comparison { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(225px,100%),1fr)); gap: 14px; }
.map-comparison figure { min-width: 0; margin: 0; }
.map-comparison svg { display: block; width: 100%; height: auto; }
.map-dialog { padding: 20px; }
.map-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 800px) {
  .universe-shell .topbar { min-height: 54px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 4px 6px; padding: 5px 12px; }
  .universe-shell .topbar .brand { padding-inline: 4px; font-size: 20px; }
  .universe-shell .topbar .status { min-width: 0; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
  .universe-shell .topbar .status::before { flex: 0 0 6px; }
  .universe-shell .topbar button:not(.brand) { padding-inline: 6px; font-size: 12px; }
  .universe-heading, .universe-toolbar { padding-block: 8px; gap: 6px; }
  .universe-heading .eyebrow { display: none; }
  .universe-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .universe-heading h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .universe-more summary { min-height: 44px; }
  .universe-back-full { display: none; }
  .universe-back-short { display: inline; }
  .universe-toolbar { align-items: stretch; }
  .universe-toolbar .universe-scope-label { width: 100%; }
  .universe-toolbar label.universe-scope-label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; }
  .universe-toolbar .row { width: 100%; gap: 4px; }
  .universe-toolbar button { flex: 1; padding-inline: 5px; font-size: 12px; }
  .universe-shell button { min-height: 44px; }
  .universe-panel { --control-size: 44px; }
}