/* The Joined Cinematic UI v1.0 — opt-in foundation; no automatic enqueue. */
[data-tj-ui="cinematic"] {
  --tj-bg: #080C10;
  --tj-bg-alt: #0D1319;
  --tj-surface: #101820;
  --tj-surface-raised: #18212B;
  --tj-pink: #FF1478;
  --tj-pink-hover: #E60065;
  --tj-pink-soft: #FF76B0;
  --tj-white: #FFFFFF;
  --tj-text: #FFFFFF;
  --tj-text-muted: #B5BEC8;
  --tj-text-subtle: #8994A2;
  --tj-cream: #F8F5EF;
  --tj-border: #303B46;
  --tj-success: #35D994;
  --tj-warning: #FFBF47;
  --tj-danger: #FF5263;
  --tj-info: #57C7FF;
  --tj-font-display: "Anton", Impact, sans-serif;
  --tj-font-heading: "Barlow Condensed", sans-serif;
  --tj-font-body: "Inter", Arial, sans-serif;
  --tj-radius-sm: 8px;
  --tj-radius-card: 12px;
  --tj-radius-modal: 16px;
  --tj-header-height: 60px;
  --tj-sidebar-width: 220px;
  --tj-transition: 180ms ease;
  --tj-on-accent: #080C10;
  --tj-focus: #57C7FF;
}

/* Legacy aliases remain local to migrated roots. Ink/paper meanings are not inverted. */
[data-tj-ui="cinematic"] {
  box-sizing: border-box;
  --tj-card: var(--tj-surface);
  --tj-pink-dark: var(--tj-pink-hover);
  --tj-offwhite: var(--tj-cream);
  --tj-profile-accent: var(--tj-pink);
  color-scheme: dark;
  color: var(--tj-text);
  background: var(--tj-bg);
  font-family: var(--tj-font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
[data-tj-ui="cinematic"] :where(*, *::before, *::after) { box-sizing: border-box; }
[data-tj-ui="cinematic"] :where(img, video) { max-width: 100%; height: auto; }
[data-tj-ui="cinematic"] .tj-ui-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-tj-ui="cinematic"] :where(button, input, textarea, select) { font: inherit; }
[data-tj-ui="cinematic"] :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--tj-focus);
  outline-offset: 3px;
}
[data-tj-ui="cinematic"] :where(.tj-ui-button, .tj-ui-input, .tj-ui-panel) { min-width: 0; }
[data-tj-ui="cinematic"] .tj-ui-heading {
  margin: 0;
  font-family: var(--tj-font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}
[data-tj-ui="cinematic"] .tj-ui-eyebrow {
  margin: 0 0 .75rem;
  color: var(--tj-pink-soft);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
[data-tj-ui="cinematic"] .tj-ui-muted { color: var(--tj-text-muted); }
[data-tj-ui="cinematic"] .tj-ui-panel {
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--tj-border);
  border-radius: var(--tj-radius-card);
  background: var(--tj-surface);
}
[data-tj-ui="cinematic"].tj-ui-stack,
[data-tj-ui="cinematic"] .tj-ui-stack { display: grid; gap: 1rem; }
[data-tj-ui="cinematic"] .tj-ui-stack[hidden] { display: none; }
[data-tj-ui="cinematic"] .tj-ui-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
[data-tj-ui="cinematic"] .tj-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  max-width: 100%;
  padding: .65rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--tj-radius-sm);
  background: var(--tj-pink);
  color: var(--tj-on-accent);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tj-transition), border-color var(--tj-transition);
}
[data-tj-ui="cinematic"] .tj-ui-button:hover { background: var(--tj-pink-hover); color: var(--tj-white); }
[data-tj-ui="cinematic"] .tj-ui-button--secondary {
  border-color: var(--tj-text-subtle);
  background: transparent;
  color: var(--tj-text);
}
[data-tj-ui="cinematic"] .tj-ui-button--secondary:hover { background: var(--tj-surface-raised); }
[data-tj-ui="cinematic"] .tj-ui-button:disabled { opacity: .55; cursor: not-allowed; }
[data-tj-ui="cinematic"] .tj-ui-field { display: grid; gap: .5rem; min-width: 0; }
[data-tj-ui="cinematic"] .tj-ui-label { font-size: .875rem; font-weight: 600; }
[data-tj-ui="cinematic"] .tj-ui-input {
  width: 100%;
  min-height: 44px;
  padding: .75rem;
  border: 1px solid var(--tj-text-subtle);
  border-radius: var(--tj-radius-sm);
  background: var(--tj-surface-raised);
  color: var(--tj-text);
}
[data-tj-ui="cinematic"] .tj-ui-input::placeholder { color: var(--tj-text-muted); opacity: 1; }
[data-tj-ui="cinematic"] .tj-ui-input[aria-invalid="true"] { border-color: var(--tj-danger); }
[data-tj-ui="cinematic"] .tj-ui-error { margin: 0; color: var(--tj-danger); font-size: .875rem; }
[data-tj-ui="cinematic"] .tj-ui-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1rem, 4vw, 2rem);
  overflow: auto;
  border: 1px solid var(--tj-border);
  border-radius: var(--tj-radius-modal);
  color: var(--tj-text);
  background: var(--tj-surface);
}
[data-tj-ui="cinematic"] .tj-ui-dialog::backdrop { background: rgb(0 0 0 / .8); }
[data-tj-ui="cinematic"] .tj-ui-dialog-heading { margin: 0; font-family: var(--tj-font-heading); font-size: clamp(1.5rem, 4vw, 2rem); }
[data-tj-ui="cinematic"] .tj-ui-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
[data-tj-ui="cinematic"] .tj-ui-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1rem;
  border-radius: var(--tj-radius-sm);
  color: var(--tj-text-muted);
  text-decoration: none;
}
[data-tj-ui="cinematic"] .tj-ui-nav a:hover { color: var(--tj-text); background: var(--tj-surface-raised); }
[data-tj-ui="cinematic"] .tj-ui-nav a[aria-current="page"] { color: var(--tj-on-accent); background: var(--tj-pink); font-weight: 700; }
[data-tj-ui="cinematic"] .tj-ui-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
[data-tj-ui="cinematic"] .tj-ui-card { min-width: 0; overflow: hidden; border: 1px solid var(--tj-border); border-radius: var(--tj-radius-card); background: var(--tj-surface); }
[data-tj-ui="cinematic"] .tj-ui-card-body { padding: 1rem; }
[data-tj-ui="cinematic"] .tj-ui-card h3 { margin: 0 0 .5rem; }
[data-tj-ui="cinematic"] .tj-ui-card p { margin: .5rem 0; }
[data-tj-ui="cinematic"] .tj-ui-badge { display: inline-flex; padding: .2rem .6rem; border: 1px solid var(--tj-border); border-radius: 2rem; color: var(--tj-text-muted); font-size: .75rem; }
/* Shared native identity dialog. Existing picker owns choice, focus and lifecycle. */
dialog.tj-site-panel[data-tj-ui="cinematic"] { box-sizing:border-box; width:min(75rem,calc(100vw - 2rem)); height:min(53rem,calc(100dvh - 2rem)); max-width:calc(100vw - 2rem); max-height:calc(100dvh - 2rem); margin:auto; padding:.75rem; overflow:hidden; border:1px solid var(--tj-border); border-radius:var(--tj-radius-modal); background:var(--tj-bg); color:var(--tj-text); box-shadow:0 1.5rem 5rem #0008; }
dialog.tj-site-panel[data-tj-ui="cinematic"][open] { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr); gap:.5rem; }
dialog.tj-site-panel[data-tj-ui="cinematic"] > .tj-site-panel-title { grid-column:1; grid-row:1; align-self:center; margin:0; padding:0 .5rem; color:var(--tj-text); font:700 1.5rem/1.2 var(--tj-font-heading); overflow-wrap:anywhere; }
dialog.tj-site-panel[data-tj-ui="cinematic"]::backdrop { background:#080c10cc; }
dialog.tj-site-panel[data-tj-ui="cinematic"] > button { position:static; grid-column:2; grid-row:1; justify-self:end; min-width:44px; min-height:44px; margin:0; padding:.5rem; border:1px solid var(--tj-border); border-radius:var(--tj-radius-sm); background:var(--tj-surface-raised); color:var(--tj-text); font:600 1.5rem/1 var(--tj-font-body); }
dialog.tj-site-panel[data-tj-ui="cinematic"] > iframe { grid-column:1 / -1; grid-row:2; display:block; width:100%; height:100%; min-width:0; min-height:0; border:0; border-radius:var(--tj-radius-sm); background:var(--tj-bg); }
dialog.tj-site-panel[data-tj-ui="cinematic"] > button:focus-visible { outline:3px solid var(--tj-focus); outline-offset:3px; }
dialog.tj-site-panel[data-tj-ui="cinematic"] > iframe[hidden] { display:none; }
dialog.tj-site-panel[data-tj-ui="cinematic"] > .tj-site-panel-confirm { grid-row:2; grid-column:1 / -1; min-height:0; overflow:auto; padding:clamp(1rem,3vw,2rem); border:1px solid var(--tj-border); border-radius:var(--tj-radius-card); background:var(--tj-surface); font:400 1rem/1.5 var(--tj-font-body); }
dialog.tj-site-panel[data-tj-ui="cinematic"] .tj-site-panel-confirm h3 { margin:0 0 1rem; color:var(--tj-text); font:700 1.75rem/1.2 var(--tj-font-heading); }
dialog.tj-site-panel[data-tj-ui="cinematic"] .tj-site-panel-confirm p { color:var(--tj-text-muted); }
dialog.tj-site-panel[data-tj-ui="cinematic"] .tj-site-panel-confirm button { display:block; width:100%; min-height:44px; margin:.75rem 0 0; padding:.75rem; border:1px solid var(--tj-border); border-radius:var(--tj-radius-sm); background:var(--tj-surface-raised); color:var(--tj-text); font:600 .9375rem/1.4 var(--tj-font-body); white-space:normal; overflow-wrap:anywhere; }
dialog.tj-site-panel[data-tj-ui="cinematic"] .tj-site-panel-confirm .tj-site-panel-discard { border-color:var(--tj-danger); }
dialog.tj-site-panel[data-tj-ui="cinematic"] .tj-site-panel-confirm button:focus-visible { outline:3px solid var(--tj-focus); outline-offset:3px; }
dialog.tj-site-panel[data-tj-ui="cinematic"] > .tj-site-panel-status { grid-row:3; grid-column:1 / -1; margin:0; color:var(--tj-warning); font:400 .875rem/1.5 var(--tj-font-body); overflow-wrap:anywhere; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] { width: min(40rem,calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 1rem; overflow: hidden; border: 1px solid var(--tj-border); border-radius: var(--tj-radius-modal); background: var(--tj-surface); color: var(--tj-text); box-shadow: 0 1.5rem 5rem #0008; font: 400 1rem/1.5 var(--tj-font-body); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"][open] { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: .75rem; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"]::backdrop { background: #080c10cc; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] > .tj-identity-close { grid-row: 1; position: static; justify-self: end; min-width: 44px; min-height: 44px; margin: 0; padding: .5rem; border: 1px solid var(--tj-border); border-radius: var(--tj-radius-sm); background: var(--tj-surface-raised); color: var(--tj-text); font: 600 1.5rem/1 var(--tj-font-body); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] > :not(.tj-identity-close) { grid-row: 2; min-width: 0; min-height: 0; overflow: auto; padding: .25rem; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-options > legend { color: var(--tj-text); font: 700 1.75rem/1.2 var(--tj-font-heading); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-options > p { color: var(--tj-text-muted); font: 400 .9375rem/1.5 var(--tj-font-body); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; padding: .25rem; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons button { border: 1px solid var(--tj-border); border-radius: var(--tj-radius-card); background: var(--tj-surface-raised); color: var(--tj-text); box-shadow: none; font: 600 .9375rem/1.4 var(--tj-font-body); letter-spacing: normal; text-transform: none; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons button:hover { border-color: var(--tj-pink-soft); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons button[aria-pressed=true] { border-color: var(--tj-pink); box-shadow: 0 0 0 1px var(--tj-pink); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons strong { color: var(--tj-text); font: 600 .9375rem/1.4 var(--tj-font-body); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons small { color: var(--tj-text-muted); font: 400 .8125rem/1.4 var(--tj-font-body); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-placeholder { background: var(--tj-pink); color: var(--tj-on-accent); flex-shrink: 0; }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-join-with { background: transparent; color: var(--tj-text); }
dialog.tj-identity-dialog[data-tj-ui="cinematic"] :is(a,button,input,select):focus-visible { outline: 3px solid var(--tj-focus); outline-offset: 3px; }
@media(max-width:520px) { dialog.tj-identity-dialog[data-tj-ui="cinematic"] .tj-identity-buttons { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) {
  [data-tj-ui="cinematic"] .tj-ui-button { transition: none; }
}
@media (forced-colors: active) {
  [data-tj-ui="cinematic"] .tj-ui-button { border-color: ButtonText; }
  [data-tj-ui="cinematic"] .tj-ui-input { border-color: FieldText; }
}