/* Shared UI for editorial, workspaces, platform administration and account flows. */
.ui-app { --ctl: 44px; }
.ui-app [hidden] { display: none !important; }
.ui-app :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ui-app .page-head { background: transparent; border-bottom: 0; padding-top: 30px; padding-bottom: 24px; }
.ui-app .page-head h1 { font-size: 28px; overflow-wrap: anywhere; }
.ui-app .head-text p { max-width: 850px; }
.ui-app main, .ui-app .page, .ui-section { min-width: 0; }
.ui-app main { gap: 24px; }
.ui-app .card { border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.ui-app button, .ui-app .btn { min-height: 44px; }
.ui-app input:not([type]), .ui-app input[type='email'] { border: 1px solid var(--line-field); border-radius: var(--r); padding: 10px 12px; background: var(--surface); color: var(--ink); font: inherit; min-height: 44px; max-width: 100%; }
.ui-app input:focus-visible, .ui-app textarea:focus-visible, .ui-app select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ui-app input[type='checkbox'], .ui-app input[type='radio'] { accent-color: var(--accent); }
.ui-app .nav { min-height: 44px; }
.ui-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; color: var(--muted); font-size: 12px; }
.ui-breadcrumbs a { min-height: 32px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.ui-page-heading .head-text { gap: 8px; }
.ui-project-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 32px 20px; }
.ui-project-tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); }
.ui-project-tabs a:hover { border-color: var(--line-hover); }
.ui-project-tabs a[aria-current] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ui-page-index { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding: 12px 18px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); }
.ui-page-index span { color: var(--muted); font-size: 12px; }
.ui-page-index a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ui-page-stack { display: grid; gap: 24px; min-width: 0; }
.ui-section { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.ui-section > :first-child { margin-top: 0; }
.ui-section > :last-child { margin-bottom: 0; }
.ui-section h2 { margin: 28px 0 16px; font-size: 20px; line-height: 1.35; scroll-margin-top: 24px; }
.ui-section h3 { margin: 24px 0 12px; font-size: 16px; }
.ui-section h1 { font-size: 26px; margin-bottom: 16px; }
.ui-section p { color: var(--ink-2); line-height: 1.65; margin: 12px 0; max-width: 90ch; }
.ui-section a { text-underline-offset: 3px; }
.ui-section p a, .ui-section li a { text-decoration: underline; }
.ui-section > ul, .ui-section > ol { margin: 12px 0; padding-left: 22px; }
.ui-section li { margin: 6px 0; line-height: 1.6; }
.ui-section form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 20px; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.ui-section form > label { display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ui-section form > p, .ui-section form > h3, .ui-section form > h2, .ui-section form > strong, .ui-section form > fieldset { flex-basis: 100%; margin-block: 0; }
.ui-section form > button { align-self: flex-end; white-space: normal; }
.ui-section form > select { max-width: 100%; min-width: 0; }
.ui-section label > input:not([type='checkbox']):not([type='radio']), .ui-section label > select, .ui-section label > textarea { width: 100%; min-width: 0; }
.ui-section label:has(textarea) { flex-basis: 100%; }
.ui-section label:has(input[type='checkbox']), .ui-section label:has(input[type='radio']) { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; flex-basis: 100%; font-weight: 400; }
.ui-section input[type='checkbox'], .ui-section input[type='radio'] { flex: none; width: 18px; height: 18px; }
.ui-section form input[type='hidden'] { display: none; }
.ui-section form > p label { margin: 8px 0; }
.ui-section fieldset { border: 1px solid var(--line); border-radius: var(--r); min-width: 0; padding: 16px; }
.ui-section legend { padding: 0 8px; font-weight: 600; }
.ui-section article, .ui-section > section { border: 1px solid var(--line); padding: 20px; border-radius: var(--r); margin: 16px 0; min-width: 0; }
.ui-section article > :first-child, .ui-section > section > :first-child { margin-top: 0; }
.ui-section article form { background: var(--surface-2); }
.ui-section details { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 8px; }
.ui-section summary { cursor: pointer; min-height: 44px; padding-block: 10px; color: var(--ink-2); font-weight: 500; }
.ui-section [role='status'] { padding: 14px 16px; border-radius: var(--r); background: var(--accent-soft); color: var(--ink-2); }
.ui-section [role='alert'] { padding: 14px 16px; border: 1px solid var(--bad-line); border-radius: var(--r); background: var(--bad-wash); color: var(--bad-ink); }
.ui-section .ui-danger-title { color: var(--bad-ink); padding-top: 24px; border-top: 1px solid var(--bad-line); }
.ui-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: 18px 0; overscroll-behavior-x: contain; }
.ui-table-scroll table { width: 100%; border-collapse: collapse; margin: 0; text-align: left; font-size: 13px; }
.ui-table-scroll th { padding: 12px 16px; background: var(--surface-3); color: var(--muted); font-weight: 600; white-space: nowrap; }
.ui-table-scroll td { padding: 14px 16px; border-top: 1px solid var(--line-soft); vertical-align: top; min-width: 110px; max-width: 420px; overflow-wrap: anywhere; }
.ui-table-scroll tbody tr:hover { background: var(--surface-2); }
.ui-table-scroll td form { min-width: 260px; padding: 12px; margin: 0; }
.ui-section dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(80px,auto); max-width: 800px; margin: 16px 0; }
.ui-section dt, .ui-section dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ui-section dt { color: var(--muted); }
.ui-section dd { text-align: right; font-weight: 600; }
.ui-section [style*='pre-wrap'] { white-space: pre-wrap; background: var(--surface-2); padding: 20px; border: 1px solid var(--line); border-radius: var(--r); line-height: 1.7; }
.ui-section img { max-width: 100%; height: auto; max-height: 500px; object-fit: contain; border-radius: var(--r); }
.ui-section meter { width: 100%; min-width: 120px; height: 18px; accent-color: var(--accent); }
.ui-action-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 14px; margin: 16px 0; }
.ui-action-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-height: 100px; color: var(--ink); }
.ui-action-card:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.ui-action-card strong { display: flex; align-items: center; gap: 8px; }
.ui-action-card span { color: var(--muted); font-size: 13px; }
.ui-records { list-style: none; padding: 0 !important; border: 1px solid var(--line); border-radius: var(--r); }
.ui-records li { margin: 0; padding: 16px; border-bottom: 1px solid var(--line-soft); }
.ui-records li:last-child { border: 0; }
.ui-records a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.ui-account { max-width: 680px; margin-inline: auto; width: 100%; }
.ui-app.login-page .login-box { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 32px; }
.ui-app.login-page .login-about { margin-bottom: 8px; }
.ui-app.login-page .login-problem { border-radius: var(--r); padding: 14px; }
.ui-section button.danger { color: var(--bad-ink); }
.ui-mobile-nav { display: none; }
@media (max-width: 1000px) {
  .ui-project-tabs { padding-inline: 20px; }
  .ui-app .page-head { padding-top: 24px; }
  .ui-app .workspace-side { gap: 8px; }
  .ui-mobile-nav { display: block; position: static; }
  .ui-mobile-nav > summary { min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
  .workspace-side > nav { display: none; }
  .workspace-side .ui-mobile-nav nav { padding: 12px 0 4px; }
}
@media (max-width: 600px) {
  .ui-app .page-head h1 { font-size: 24px; }
  .ui-section { padding: 18px; }
  .ui-section form { padding: 16px; gap: 14px; }
  .ui-section form > label, .ui-section form > button, .ui-section form > select { flex-basis: 100%; width: 100%; }
  .ui-section form > p { overflow-wrap: anywhere; }
  .ui-section article, .ui-section > section { padding: 14px; }
  .ui-project-tabs { padding-inline: 16px; gap: 4px; }
  .ui-project-tabs a { padding: 8px 12px; }
  .ui-table-scroll th, .ui-table-scroll td { padding: 10px 12px; }
  .ui-page-index { padding: 8px 12px; gap: 0 12px; }
  .ui-page-index a { min-height: 44px; }
  .ui-section textarea, .ui-section input:not([type='checkbox']), .ui-section select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ui-app * { scroll-behavior: auto !important; transition: none !important; } }
.ui-skip { position: absolute; top: -100px; left: 16px; z-index: 100; background: var(--surface); padding: 12px; border: 1px solid var(--accent); border-radius: var(--r); }
.ui-skip:focus { top: 12px; }
.ui-app .workspace-side .nav .label { overflow-wrap: anywhere; }
.ui-app .workspace-side .nav { height: auto; }
.ui-standalone { max-width: 1100px; margin: 0 auto; padding-top: 32px; }
.ui-section form:not(:has(label,select,textarea,input:not([type='hidden']),p)) { display: inline-flex; border: 0; padding: 0; background: transparent; margin: 8px 12px 8px 0; }
.ui-page-index-wrap { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 0 18px; }
.ui-page-index-wrap > summary { cursor: pointer; min-height: 44px; padding-block: 12px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.ui-page-index-wrap .ui-page-index { border: 0; padding: 0 0 12px; }
.ui-project-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 12px; list-style: none; padding: 0 !important; margin: 16px 0 !important; }
.ui-project-list li { margin: 0; }
.ui-project-list a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none !important; font-weight: 600; }
.ui-project-list a::after { content: '→'; color: var(--accent); }
.ui-project-list a:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.ui-app .manual-layout { min-width: 0; width: 100%; }
.ui-app .manual { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ui-app .manual pre { max-width: 100%; overflow-x: auto; }
.ui-app .manual table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) { .ui-app .manual { width: 100%; } }

/* Palette accents: colored wayfinding on light work surfaces. */
.ui-app .nav.on { color: var(--vivid-royal); background: var(--indigo-soft); }
.ui-app .ui-project-tabs a[aria-current] { color: var(--vivid-royal); background: var(--indigo-soft); border-color: #DCC9EE; }
.ui-app .ui-action-card .ic { color: var(--indigo-bloom); }
.ui-app .ui-action-card:hover { background: var(--aqua-soft); border-color: var(--sky-aqua); }
.ui-app .workspace-selected { color: var(--vivid-royal); }
.ui-app .workspace-symbol { color: var(--vivid-royal); background: var(--indigo-soft); border-color: #DCC9EE; }
.ui-app .workspace-count { color: var(--aqua-ink); background: var(--aqua-soft); }
.ui-app .ui-section [role='status'] { background: var(--aqua-soft); border-left: 3px solid var(--sky-aqua); }
.ui-app .ui-section [role='alert'] { border-left: 3px solid var(--neon-pink); }
.ui-app .ui-danger-title { border-top-color: var(--neon-pink); }

/* The portal area is identified by text as well as colour. Work surfaces stay light. */
.realm-admin { --accent: #7209b7; --accent-dark: #3a0ca3; --accent-soft: #f5effa; }
.realm-admin .side, .realm-admin .login-box { border-top: 4px solid #7209b7; }
.realm-customer .side, .realm-customer .login-box { border-top: 4px solid #4361ee; }
.platform-filters { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.platform-filters a, .platform-badge { border-radius:8px; padding:6px 10px; background:#f2f4ff; color:#3a0ca3; font-size:13px; }
.platform-filters a[aria-current="page"] { background:#4361ee; color:white; }
.platform-dot { width:10px; height:10px; border-radius:50%; background:#4361ee; flex-shrink:0; }
.platform-telegram { background:#4cc9f0; } .platform-instagram { background:#f72585; }
.platform-threads { background:#3a0ca3; } .platform-facebook { background:#7209b7; }
.workspace-account { flex-wrap:wrap; }

/* Native disclosures keep platform pages accessible without JavaScript. */
.platform-group { margin: 3px 0; min-width: 0; }
.platform-toggle { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border-radius: 10px; cursor: pointer; list-style: none; color: var(--ink); }
.platform-toggle::-webkit-details-marker { display: none; }
.platform-toggle:hover { background: var(--aqua-soft); }
.platform-toggle.is-active { background: var(--indigo-soft); color: var(--vivid-royal); }
.platform-toggle:focus-visible, .platform-pages a:focus-visible { outline: 2px solid var(--electric-sapphire); outline-offset: 2px; }
.platform-logo { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
.platform-toggle .label { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 500; }
.platform-page-count { font-size: 12px; color: var(--ink-2); }
.platform-chevron { width: 7px; height: 7px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin: 0 3px; }
.platform-group[open] > summary .platform-chevron { transform: rotate(45deg); }
.platform-pages { margin: 4px 0 10px 22px; padding: 0 0 0 12px; border-left: 1px solid var(--line); list-style: none; }
.platform-pages li { margin: 0; }
.platform-pages a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.platform-pages a:hover { background: var(--aqua-soft); }
.platform-pages a[aria-current] { color: var(--vivid-royal); background: var(--indigo-soft); font-weight: 600; }
.platform-pages .platform-overview { color: var(--accent); font-size: 12px; }
.platform-empty { padding: 10px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }

@media (max-width: 700px) {
  .ui-mobile-nav .menu-group { display: block; }
  .ui-mobile-nav .platform-group { width: 100%; }
}

.p0-grid, .p0-states, .p0-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 16px; }
.p0-grid .ui-section { margin: 0; }
.p0-state { display: inline-block; font-size: 12px; color: #3a0ca3; background: #f2f4ff; border-radius: 8px; padding: 6px 10px; }
.p0-warning { border-left: 4px solid #4361ee; background: #f2f4ff; padding: 16px; border-radius: 8px; margin-bottom: 24px; }
.p0-warning p { margin: 6px 0 0; }
.p0-fields { margin: 16px 0; }
.p0-fields label { display: grid; gap: 8px; }
.p0-muted { color: var(--ink-2); font-size: 13px; }
.p0-connection { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.p0-prototype button:disabled { cursor: not-allowed; }
.p0-card[hidden] { display: none; }

.p0-card { padding:24px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); overflow-wrap:anywhere; min-width:0; }
.p0-card h2 { font-size:20px; margin:18px 0 12px; }