/* TOKYO 1.5 — NOVA presentation layer. No build process required. */
:root {
  --tokyo-red: #840715;
  --tokyo-patch-gold: #968d00;
  --tokyo-white: #fff;
  --tokyo-gutter: clamp(8px, 2.5vw, 48px);
  --tokyo-black: #000;
  --tokyo-panel: #130d10;
  --tokyo-line: #756836;
  --tokyo-text: #f2eeed;
  --tokyo-muted: #bcb6b7;
  --tokyo-gold: #e6d88d;
}
html { min-height:100%; background:#040304; }
body.tokyo { margin:0; min-height:100vh; height:auto; background:radial-gradient(ellipse at top,#84071544,transparent 65%),url('../images/stars.svg') center top / 1000px auto repeat,#040304; color:var(--tokyo-text); font-family:'Segoe UI',Arial,sans-serif; line-height:1.7; }
.tokyo *, .tokyo *::before, .tokyo *::after { box-sizing:border-box; }
.tokyo a { color:var(--tokyo-gold); text-underline-offset:4px; border-bottom-color:#968d0055; }
.tokyo a:hover { color:#f9f5f4; border-bottom-color:#e6e2e1; }
.tokyo :focus-visible { outline:2px solid #eee4a0; outline-offset:3px; }
.tokyo .tokyo-skip { position:fixed; top:-100px; left:20px; z-index:200; padding:10px 18px; background:#eee4a0; color:#130d10; border-radius:5px; }
.tokyo .tokyo-skip:focus { top:12px; }
.tokyo .tokyo-site { position:relative; --tokyo-frame-radius:16px; width:calc(100% - var(--tokyo-gutter)*2); max-width:none; margin:clamp(12px,2vw,32px) auto; min-height:0; border:2px solid #968d00; border-radius:var(--tokyo-frame-radius); background:#000; box-shadow:0 20px 70px #0009; }
/* Inner frame sits above the banner so both colours remain visible. */
.tokyo .tokyo-site::after { content:""; position:absolute; inset:0; border:2px solid var(--tokyo-red); border-radius:calc(var(--tokyo-frame-radius) - 2px); pointer-events:none; z-index:40; }
.tokyo .tokyo-site > header { overflow:visible; position:relative; padding:0; margin:0; border:0; isolation:isolate; border-radius:inherit; background:#000; z-index:20; }
.tokyo header .inner { overflow:visible; position:relative; max-width:none; margin:0; padding:0; border-radius:16px 16px 0 0; background:#000; isolation:isolate; }
.tokyo header .background { position:absolute; top:0; left:auto; right:0; width:66.482759%; height:calc((100vw - var(--tokyo-gutter)*2 - 4px)/4.5); max-width:none; object-fit:contain; object-position:right center; padding:0; mask-image:linear-gradient(90deg,transparent 0%,#000 12%); transform:none; z-index:-2; opacity:1; border-radius:16px 16px 0 0; }
.tokyo header .inner::before { content:""; position:absolute; top:0; left:0; right:auto; width:45%; height:calc((100vw - var(--tokyo-gutter)*2 - 4px)/4.5); z-index:-3; border-radius:16px 16px 0 0; background:url("../images/banner-extension.png") left center / 222.222222% 100% no-repeat; }
.tokyo header .gradient { position:absolute; inset:0; width:100%; height:calc((100vw - var(--tokyo-gutter)*2 - 4px)/4.5); z-index:-1; border-radius:inherit; background:linear-gradient(0deg,#000 0%,#000000e6 5%,#00000080 12%,transparent 24%),linear-gradient(90deg,#000000a0 0%,#00000040 26%,transparent 45%); }
.tokyo header .top { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:24px; min-height:max(200px,calc((100vw - var(--tokyo-gutter)*2 - 4px)/4.5)); padding:60px clamp(24px,4.5vw,88px) 30px; }
.tokyo header .top > .tokyo-eyebrow { position:absolute; top:26px; left:clamp(24px,4.5vw,88px); max-width:65%; }
.tokyo .tokyo-brand { display:flex; align-items:center; gap:22px; flex:1; min-width:0; max-width:42%; margin-top:15px; }
.tokyo .tokyo-name { min-width:0; overflow-wrap:anywhere; }
.tokyo .tokyo-name h1 { margin:0; color:#ffffff; font-family:'Segoe UI',Arial,sans-serif; font-size:clamp(30px,4.2vw,76px); font-weight:300; line-height:1.15; letter-spacing:.075em; text-transform:uppercase; text-shadow:0 0 20px #968d006b,0 3px 10px #000; }
.tokyo .tokyo-eyebrow { color:#dcd8d7; font-size:11px; font-weight:600; letter-spacing:.15em; overflow-wrap:anywhere; }
.tokyo .tokyo-subtitle { display:block; margin-top:14px; color:#d4d0cf; font-size:13px; letter-spacing:.08em; overflow-wrap:anywhere; }
.tokyo header .logo img { width:auto; max-width:180px; height:80px; object-fit:contain; }
.tokyo header .signin-container { position:absolute; top:24px; right:26px; margin:0; padding:0; }
.tokyo header .logged-in-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.tokyo header .logged-in-controls > span { margin:0; }
.tokyo header .logged-in-controls a { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:6px 10px; border:0; border-radius:6px; color:#f0eceb; font-size:12px; background:#08050766; }
.tokyo header .logged-in-controls a:hover { background:#554a2899; }
.tokyo header img.icon { width:20px; height:20px; filter:brightness(1.2); }
.tokyo header .bottom { position:relative; width:max-content; max-width:calc(100% - 48px); margin:0 auto; padding:0 10px; background:rgba(19,9,13,.64); border:1px solid #968d00; border-radius:10px; backdrop-filter:blur(12px); }
.tokyo header .bottom .container { max-width:none; display:block; }
.tokyo header .bottom .left { display:block; }
.tokyo .nav-main > ul { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:3px; padding:6px 0; margin:0; list-style:none; }
.tokyo .nav-main > ul > li { margin:0; padding:0; min-width:0; }
.tokyo .nav-main ul > li { margin-left:0; margin-right:0; }
.tokyo .tokyo-submenu { min-width:0; }
.tokyo .nav-main > ul > li > a, .tokyo .tokyo-nav-group > a { display:flex; align-items:center; min-height:42px; padding:11px 16px; color:#e7e3e2; background:transparent; border:0; border-radius:6px; font-size:13px; line-height:1.4; font-weight:500; }
.tokyo .nav-main > ul > li > a:hover, .tokyo .tokyo-nav-group > a:hover { background:#391019aa; color:#fff; }
.tokyo .nav-main a.active { border-radius:6px; color:#fffbfa; background:linear-gradient(#650a18bb,#31080ebb); box-shadow:inset 0 0 0 1px #aa994e; }
.tokyo-nav-toggle { display:none; }
.tokyo-nav-group { position:relative; display:flex; align-items:center; border-radius:6px; }
.tokyo .tokyo-nav-group > a { padding-right:6px; }
.tokyo-submenu-toggle { display:flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; min-height:42px; color:#eeeae9; background:transparent; border:0; border-radius:0 6px 6px 0; font-size:17px; line-height:1; cursor:pointer; }
.tokyo-submenu-toggle:hover, .tokyo-nav-group.is-open { background:#3b0a13bb; }
.tokyo-submenu { position:absolute; z-index:30; top:calc(100% + 8px); left:50%; transform:translateX(calc(-50% + var(--dropdown-shift,0px))); width:max-content; max-width:calc(100vw - var(--tokyo-gutter)*2 - 24px); padding:6px; border:1px solid #aa994e; border-radius:8px; background:rgba(19,9,13,.78); box-shadow:0 12px 30px #000b; backdrop-filter:blur(14px); display:none; }
.tokyo-submenu::before { content:''; position:absolute; top:-10px; left:0; width:100%; height:10px; }
.tokyo .tokyo-submenu > ul { display:flex; align-items:center; flex-wrap:nowrap; gap:3px; max-width:100%; overflow-x:auto; margin:0; padding:0; list-style:none; scrollbar-width:thin; scrollbar-color:#7e6d3c #11090d; }
.tokyo .tokyo-submenu li { margin:0; padding:0; flex:0 0 auto; }
.tokyo .tokyo-submenu li.spacer { display:none; }
.tokyo .tokyo-submenu a { display:block; min-height:40px; padding:10px 15px; white-space:nowrap; border:0; border-radius:5px; color:#efebea; font-size:13px; line-height:1.5; background:transparent; }
.tokyo .tokyo-submenu a:hover, .tokyo .tokyo-submenu a.active { color:#fff; background:linear-gradient(#840715cc,#430910cc); box-shadow:inset 0 0 0 1px #989493; }
.tokyo .tokyo-site:not(.tokyo-enhanced) .tokyo-nav-group:hover > .tokyo-submenu,
.tokyo .tokyo-site:not(.tokyo-enhanced) .tokyo-nav-group:focus-within > .tokyo-submenu,
.tokyo .tokyo-nav-group.is-open > .tokyo-submenu { display:block; }
.tokyo .tokyo-site:not(.tokyo-enhanced) .tokyo-submenu-toggle { display:none; }
.tokyo main { margin:0; padding:0; position:relative; z-index:1; background:#000; }
.tokyo main .wrapper { max-width:none; margin:0; padding:0; }
.tokyo main .body { display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-items:stretch; }
.tokyo main .body > .content { grid-column:auto; min-width:0; width:100%; max-width:none; }
.tokyo main .content-card { width:100%; max-width:none; min-height:260px; padding:64px clamp(24px,4.5vw,88px) 38px; background:transparent; border:0; border-radius:0; box-shadow:none; overflow-wrap:anywhere; }
.tokyo-admin main .body { grid-template-columns:minmax(0,1fr) clamp(220px,17vw,280px); }
.tokyo .nav-sub { min-width:0; background:rgba(19,9,13,.74); backdrop-filter:blur(10px); border-left:1px solid #483e22; border-top:1px solid #756836; padding:30px 18px; }
.tokyo-nav-heading { color:#cecac9; display:flex; justify-content:space-between; padding:0 12px 16px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.tokyo .nav-sub ul { list-style:none; padding:0; margin:0; }
.tokyo .nav-sub ul li a { display:block; min-height:42px; padding:10px 12px; color:#e1dddc; border:0; border-radius:5px; font-size:13px; line-height:1.5; }
.tokyo .nav-sub ul li a:hover, .tokyo .nav-sub ul li a.active { background:#3f371e; color:white; }
.tokyo .nav-sub .menu_category { color:#bcb8b7; font-size:11px; padding:20px 12px 5px; }
.tokyo-subnav-fallback { padding:12px clamp(24px,4.5vw,88px) 0; }
.tokyo-subnav-fallback ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.tokyo-subnav-fallback a { display:block; padding:7px 12px; border:1px solid #5d512c; border-radius:5px; }
.tokyo h1,.tokyo h2,.tokyo h3,.tokyo h4 { color:#ffffff; line-height:1.3; letter-spacing:-.015em; }
.tokyo .content-card h1,.tokyo .content-card h2 { font-size:clamp(26px,2.6vw,38px); font-weight:650; margin:0 0 18px; }
.tokyo .content-card h3 { font-size:24px; margin:22px 0 14px; }
.tokyo .content-card h4 { font-size:18px; margin:14px 0 10px; }
.tokyo :is(.content-card,.card) .page-head { color:var(--tokyo-white); }
.tokyo .page-subhead { color:var(--tokyo-muted); }
.tokyo p { font-size:15px; line-height:1.8; margin:0 0 22px; }
.tokyo .gray { color:#c6c2c1; }
.tokyo hr { border-color:#594d2a; margin:24px 0; }
.tokyo blockquote { padding:14px 20px; margin:22px 0; border-left:3px solid #b3afae; background:#19080c; }
.tokyo pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.tokyo :where(.content-card,.card) :where(img,svg,video,canvas,iframe,embed,object) { display:inline-block; vertical-align:middle; max-width:100%; }
.tokyo .content-card img { max-width:100%; height:auto; }
.tokyo :where(.content-card,.card) center { display:block; text-align:center; }
.tokyo :where(.content-card,.card) :where(p,div,h1,h2,h3,h4,h5,h6,td,th,table)[align='center' i] { text-align:center; }
.tokyo :where(.content-card,.card) :where(p,div,h1,h2,h3,h4,h5,h6,td,th,table)[align='left' i] { text-align:left; }
.tokyo :where(.content-card,.card) :where(p,div,h1,h2,h3,h4,h5,h6,td,th,table)[align='right' i] { text-align:right; }
.tokyo :where(.content-card,.card) :where(p,div,h1,h2,h3,h4,h5,h6,td,th)[align='justify' i] { text-align:justify; }
.tokyo :where(.content-card,.card) center table,.tokyo :where(.content-card,.card) table[align='center' i] { margin-left:auto; margin-right:auto; }
.tokyo input:not([type]),.tokyo input[type=text],.tokyo input[type=password],.tokyo input[type=email],.tokyo input[type=number],.tokyo input[type=search],.tokyo input[type=url],.tokyo input[type=tel],.tokyo input[type=date],.tokyo input[type=datetime-local],.tokyo input[type=month],.tokyo input[type=time],.tokyo input[type=week],.tokyo textarea,.tokyo select { background:#100a0d; border:1px solid #786b3b; color:#f8f4f3; border-radius:6px; padding:10px 12px; max-width:100%; font:inherit; font-size:14px; box-shadow:none; }
.tokyo textarea { width:100%; min-height:180px; }
.tokyo input::placeholder,.tokyo textarea::placeholder { color:#b3afae; }
.tokyo input:focus,.tokyo textarea:focus,.tokyo select:focus { background:#1a0e13; border-color:#eee4a0; color:#f8f4f3; box-shadow:0 0 0 2px #968d002b; }
.tokyo input[type=checkbox],.tokyo input[type=radio] { accent-color:#a00c20; }
.tokyo .button-main { display:inline-block; background:linear-gradient(#840715,#48070f); border:1px solid #b9a956; color:white; border-radius:6px; padding:10px 22px; font-size:13px; line-height:1.5; font-weight:650; }
.tokyo .button-main:hover { background:#a20b20; color:white; }
.tokyo .button-sec,.tokyo .button-small { display:inline-block; background:#15070a; border:1px solid #7f6e3c; color:#e9e5e4; border-radius:6px; font-size:13px; }
.tokyo .button-sec:hover,.tokyo .button-small:hover { background:#443b20; color:white; }
.tokyo .flash_message { border:1px solid currentColor; border-radius:6px; margin:0 0 24px; }
.tokyo .flash_message p { padding:12px 16px; margin:0; }
.tokyo .flash-info { background:#241b0b; color:#f2e6b6; border-color:#968d00; }
.tokyo .flash-success { background:#153329; color:#c2ecd7; border-color:#50856c; }
.tokyo .flash-error { background:#381a23; color:#ffd1da; border-color:#9a5868; }
.tokyo .tokyo-table-scroll { max-width:100%; overflow-x:auto; margin-bottom:16px; scrollbar-color:#968d00 #100a0d; }
/* Center the manifest heading, selector, legend and filter controls together. */
.tokyo .content-card:has(#manifest) > .page-head { text-align:center; }
.tokyo #manifest { width:100%; max-width:1100px; margin-left:auto; margin-right:auto; text-align:center; }
.tokyo #manifest table { margin-left:auto; margin-right:auto; }
/* Center the roster as a block; crew names and details retain left alignment. */
.tokyo #manifest .tokyo-manifest-scroll { width:100%; max-width:1100px; margin-left:auto; margin-right:auto; }
.tokyo #manifest .tokyo-manifest-table { width:100%; min-width:850px; text-align:left; }
/* Support the mod's unclassified table and ordinary NOVA tables without JS. */
.tokyo #manifest table.manifest_table,
.tokyo #manifest table:has(img.charimg) { max-width:1100px; margin-left:auto; margin-right:auto; text-align:left; }
/* The mod uses col_15 for portraits. Reserve 80px plus cell padding. */
.tokyo #manifest td:has(img.charimg) { width:96px; min-width:96px; }
.tokyo #manifest img.charimg { display:inline-block; width:80px; height:80px; min-width:80px; max-width:80px; object-fit:cover; vertical-align:middle; }
/*
|---------------------------------------------------------------
| CHARACTER BIO
|---------------------------------------------------------------
*/

.tokyo .character-rank-display {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	vertical-align: middle;
	margin-left: 4px;
}

.tokyo img.character-rank-image {
	display: block;
	max-width: 140px;
	height: auto;
	margin: 4px 0 2px 0;
}

.tokyo .character-rank-name {
	display: block;
}

.tokyo .character-awards-box {
	margin: 0 0 18px 0;
	padding: 0;
}

.tokyo .character-awards-rack {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.tokyo .character-award-item {
	display: inline-block;
	line-height: 0;
	margin: 0;
	padding: 0;
}

.tokyo img.character-award-ribbon {
	display: block;
	max-width: 50px;
	height: auto;
	margin: 0;
	padding: 0;
}

/*
|---------------------------------------------------------------
| RELATED CHARACTERS
|---------------------------------------------------------------
*/

.tokyo .character-related-image {
	margin: 0 auto 4px auto;
	text-align: center;
	width: 55px;
	height: 70px;
	overflow: hidden;
}

.tokyo .character-related-image img {
	display: block !important;
	width: 55px !important;
	height: 70px !important;
	max-width: 55px !important;
	max-height: 70px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	object-fit: cover;
	border: 1px solid #333;
}

.tokyo .character-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 4px;
	width: 100%;
}


/* Character biography: center the whole layout, retain normal left text. */
.tokyo-main .content-card > .row:has(> .span4):has(> .span12) {
  display:grid; grid-template-columns:minmax(200px,250px) minmax(0,1fr); gap:32px;
  width:100%; max-width:1100px; margin:0 auto; text-align:left;
}
.tokyo-main .content-card > .row:has(> .span4):has(> .span12)::before,
.tokyo-main .content-card > .row:has(> .span4):has(> .span12)::after { display:none; }
.tokyo-main .content-card > .row:has(> .span4):has(> .span12) > :is(.span4,.span12) {
  float:none; width:auto; min-width:0; margin:0; text-align:left;
}
.tokyo-main .content-card > .row:has(> .span4):has(> .span12) .gallery { margin:0 0 18px; padding:0; list-style:none; }
.tokyo-main .content-card > .row:has(> .span4):has(> .span12) .gallery img { max-width:min(100%,200px); }
.tokyo .character-related-item { min-width:0; text-align:center; overflow-wrap:anywhere; }
.tokyo .character-related-link a { display:block; text-decoration:none; }
.tokyo .character-related-rank { color:var(--tokyo-muted); font-size:75%; line-height:1.15; }
.tokyo .character-related-name { font-size:85%; font-weight:bold; line-height:1.15; margin-top:2px; }
@media(max-width:760px) {
  .tokyo-main .content-card > .row:has(> .span4):has(> .span12) { grid-template-columns:minmax(0,1fr); gap:26px; }
  .tokyo .character-related-grid { max-width:300px; }
}

.tokyo table { max-width:100%; border-collapse:collapse; font-size:14px; }
.tokyo td { padding:10px 8px; }
.tokyo th { padding:12px 8px; border-bottom:1px solid #594e2a; color:#d8d4d3; font-size:11px; letter-spacing:.05em; }
.tokyo tr.alt td,.tokyo tr.light_gray,.tokyo .alt { background:#150f12; }
.tokyo table.acp { border-color:#594d2a; }
.tokyo .post_info,.tokyo #news_blocks p,.tokyo #comments p,.tokyo .info-full,.tokyo #notes { padding:12px 16px; background:#100508; border:1px solid #544928; border-radius:6px; }
.tokyo #acp-panel,.tokyo #online { background:#14060a; border-color:#756836; }
.tokyo #acp-panel .panel { background:#1a090d; border-color:#756836; min-width:0; }
.tokyo #panelmenu li a { color:#e1dddc; }
.tokyo #panelmenu li a.active,.tokyo #panelmenu li a:hover { background:#443b20; color:white; border-color:#937f46; }
.tokyo .ui-widget { font-family:inherit; font-size:14px; }
.tokyo .ui-widget-content { color:#f2eeed; background:#150f12; border-color:#655830; }
.tokyo .ui-widget-header { color:#f2eeed; background:#130d10; border-color:#655830; }
.tokyo .ui-state-default { background:#1c0e13; border-color:#655830; }
.tokyo .ui-state-default a,.tokyo .ui-state-default a:link { color:#e1dddc; }
.tokyo .ui-state-active { background:#650a18; border-color:#cabc63; }
.tokyo .ui-state-active a,.tokyo .ui-state-active a:link { color:#fff; }
.tokyo .ui-tabs-nav { display:flex; flex-wrap:wrap; }
/* NOVA's classic selected class and newer jQuery UI active class both apply. */
.tokyo .ui-tabs .ui-tabs-nav { background:#130d10; border-color:#756836; }
.tokyo .ui-tabs .ui-tabs-nav li { background:#1c0e13; border-color:#756836; }
.tokyo .ui-tabs .ui-tabs-nav li a { color:#eae6e5; background:transparent; }
.tokyo .ui-tabs .ui-tabs-nav li a:hover { color:#fffbfa; background:#38301a; border-color:#969291; }
.tokyo .ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.tokyo .ui-tabs .ui-tabs-nav li.ui-state-active { background:#650a18; }
.tokyo .ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tokyo .ui-tabs .ui-tabs-nav li.ui-state-active a { color:#fffbfa; background:#650a18; border-color:#968d00; }
.tokyo .subtabs .ui-tabs-nav { background:transparent; }
.tokyo .subtabs .ui-tabs-nav li.ui-tabs-selected a,
.tokyo .subtabs .ui-tabs-nav li.ui-state-active a { color:#fffbfa; background:#650a18; }

.tokyo .chosen-container,.tokyo .chzn-container { max-width:100%; }
.tokyo .chosen-container .chosen-drop,.tokyo .chzn-container .chzn-drop,.tokyo .chosen-container .chosen-single,.tokyo .chzn-container .chzn-single { background:#220c11; color:#f2eeed; border-color:#756638; }
.tokyo .chosen-results li.highlighted,.tokyo .chzn-results li.highlighted { background:#776738; color:white; }
.tokyo .page-supplemental,.tokyo #category-panel,.tokyo .category-panel-header { background:#1e0a0f; border-color:#655830; }
.tokyo .subnav-options-list { background:#3a331c; }
.tokyo .subnav-options-list ul li a { color:#e4e0df!important; }
.tokyo .subnav-options-list ul li a:hover { background:#5e522d; }
.tokyo #category-panel { width:100%; }
.tokyo .page-main,.tokyo .wiki-subnav,.tokyo .subnav-content ul { flex-wrap:wrap; gap:12px; }
.tokyo .bio_main_image { margin:0 0 20px 24px; }
.tokyo footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 22px; margin:0 clamp(24px,3vw,60px); padding:16px 0; border-top:1px solid #4e4425; background:#000; color:#cdc9c8; font-size:11px; line-height:1.7; border-radius:0 0 16px 16px; }
.tokyo footer > span { margin:0; }
.tokyo footer a { color:#d7d3d2; border:0; }
.tokyo .tokyo-credit { color:#e8e4e3; font-weight:500; }
.tokyo .tokyo-art-credit { flex-basis:100%; font-size:9px; color:#aeaaa9; }
.tokyo .panel-wrapper { position:fixed; inset:0; z-index:100; }
.tokyo .panel-wrapper.hidden,.tokyo .panel-wrapper[aria-hidden='true'] { display:none!important; }
.tokyo .panel-overlay { position:fixed; inset:0; background:#000b; backdrop-filter:blur(6px); }
.tokyo #panel { position:fixed; inset:0; z-index:101; padding:50px 16px; overflow-y:auto; }
.tokyo #panel .panel-body { position:relative; max-width:680px; margin:auto; padding:24px; border:1px solid #85743f; border-radius:12px; background:#11090d; box-shadow:0 20px 80px #000b; }
.tokyo #tokyo-panel-title { margin:0 0 22px; padding-right:44px; font-size:24px; }
.tokyo .panel-close { position:absolute; top:14px; right:14px; width:40px; height:40px; padding:8px; border-radius:6px; background:#42391f; color:#eeeae9; }
.tokyo .panel-close > svg { color:#eeeae9; }
.tokyo .panel-body h4 { color:#d1cdcc; padding:8px 12px; }
.tokyo .panel-body > ul > li > ul > li > a { color:#e4e0df; }
.tokyo .panel-body > ul > li > ul > li > a:hover { color:white; background:#42391f; }
body.tokyo.tokyo-panel-open { overflow:hidden; }
.tokyo-login > header { position:fixed; inset:0; padding:0; pointer-events:none; isolation:isolate; }
.tokyo-login header .background { mask-image:none; width:100%; height:100%; object-fit:cover; opacity:.4; }
.tokyo-login header .gradient { height:100%; background:radial-gradient(ellipse at center,#0006,#000c 80%); }
.tokyo-login > .wrapper { position:relative; z-index:1; min-height:100vh; width:calc(100% - var(--tokyo-gutter)*2); max-width:550px; padding:54px 0; margin:0 auto; }
.tokyo-login .head { max-width:none; text-align:center; }
.tokyo-login .head .title { font-size:28px; color:#ffffff; margin:18px 0; }
.tokyo-login .head .logo img { height:85px; max-width:200px; }
.tokyo-login .body { width:100%; max-width:none; margin-top:20px; border:2px solid var(--tokyo-patch-gold); border-radius:12px; background:#11090df2; box-shadow:inset 0 0 0 2px var(--tokyo-red),0 20px 80px #0008; }
.tokyo-login .card { padding:34px; border-radius:12px; background:transparent; }
.tokyo-login .card h1 { font-size:26px; }
.tokyo-login input[type=text],.tokyo-login input[type=email],.tokyo-login input[type=password] { width:100%; }
.tokyo-login .controls { flex-wrap:wrap; gap:18px; }
.tokyo-login .tokyo-login-credit { margin:22px 0 0; padding:0 12px; justify-content:center; text-align:center; background:transparent; border:0; }
@media(max-width:1050px) {
  .tokyo .nav-main > ul > li > a,.tokyo .tokyo-nav-group > a { padding-left:10px; padding-right:8px; font-size:12px; }
  .tokyo header .top { min-height:max(186.667px,calc((100vw - var(--tokyo-gutter)*2 - 4px)/4.5)); }
  .tokyo header .background { width:66.482759%; }
}
@media(max-width:760px) {
  .tokyo .tokyo-site { --tokyo-frame-radius:12px; }
  .tokyo header .inner { border-radius:12px 12px 0 0; background:#000; }
  .tokyo header .top { display:block; min-height:0; padding:calc((100vw - var(--tokyo-gutter)*2 - 4px)/3 + 76px) 20px 24px; }
  .tokyo header .inner::before { top:54px; height:calc((100vw - var(--tokyo-gutter)*2 - 4px)/3); border-radius:12px 12px 0 0; }
  .tokyo header .background { top:54px; width:100%; height:calc((100vw - var(--tokyo-gutter)*2 - 4px)/3); mask-image:linear-gradient(90deg,transparent 0%,#000 12%); object-fit:contain; object-position:right center; padding:0; clip-path:none; border-radius:12px 12px 0 0; }
  .tokyo header .gradient { top:54px; bottom:auto; height:calc((100vw - var(--tokyo-gutter)*2 - 4px)/3); background:linear-gradient(0deg,#000 0%,#000000b0 7%,transparent 22%),linear-gradient(90deg,#00000020,transparent 25%); }
  .tokyo .tokyo-brand { margin-top:0; gap:12px; max-width:none; }
  .tokyo .tokyo-name h1 { font-size:clamp(27px,7vw,42px); letter-spacing:.045em; }
  .tokyo header .logo img { height:54px; max-width:100px; }
  .tokyo header .top > .tokyo-eyebrow { top:calc((100vw - var(--tokyo-gutter)*2 - 4px)/3 + 54px); left:20px; max-width:100%; font-size:9px; }
  .tokyo header .signin-container { top:14px; right:10px; }
  .tokyo header .logged-in-controls { gap:1px; }
  .tokyo header .logged-in-controls a { padding:6px; font-size:11px; }
  .tokyo header .bottom { width:calc(100% - 28px); max-width:calc(100% - 28px); margin:0 auto; padding:0 8px; }
  .tokyo .tokyo-enhanced .nav-main { display:none; }
  .tokyo .tokyo-enhanced .nav-main.is-open { display:block; }
  .tokyo .tokyo-enhanced .tokyo-nav-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:12px 8px; color:#e7e3e2; border:0; background:transparent; font-size:13px; }
  .tokyo .nav-main > ul { flex-direction:column; align-items:stretch; padding:8px 0; gap:4px; }
  .tokyo .nav-main > ul > li { width:100%; max-width:100%; align-self:stretch; }
  .tokyo .nav-main > ul > li > a { padding:11px 12px; min-height:44px; }
  .tokyo .tokyo-nav-group { flex-wrap:wrap; width:100%; }
  .tokyo .tokyo-nav-group > a { min-width:0; flex:1; padding:11px 12px; min-height:44px; }
  .tokyo-submenu-toggle { width:44px; flex-basis:44px; min-height:44px; }
  .tokyo .tokyo-submenu { position:static; transform:none; min-width:0; width:100%; max-width:100%; margin:5px 0; padding:5px; flex-basis:100%; backdrop-filter:none; box-shadow:none; }
  .tokyo .tokyo-submenu::before { display:none; }
  .tokyo .tokyo-submenu > ul { width:100%; overflow-x:auto; }
  .tokyo .tokyo-site:not(.tokyo-enhanced) .tokyo-submenu { display:block; }
  .tokyo .tokyo-submenu a { min-height:44px; padding:11px 12px; }
  .tokyo main .content-card { min-height:0; padding:32px 22px; }
  .tokyo-admin main .body { grid-template-columns:minmax(0,1fr); }
  .tokyo-admin .nav-sub { grid-row:1; border-left:0; border-bottom:1px solid #483e22; padding:20px 16px; }
  .tokyo-admin .nav-sub ul { display:flex; flex-wrap:wrap; gap:4px; }
  .tokyo-admin .nav-sub .menu_category { width:100%; padding:12px 8px 4px; }
  .tokyo-admin .nav-sub .spacer { display:none; }
  .tokyo-admin .tokyo-admin-collapsible > .tokyo-nav-heading { display:none; }
  .tokyo-admin-disclosures { display:grid; gap:10px; }
  .tokyo-admin-disclosure { min-width:0; border:1px solid var(--tokyo-line); border-radius:8px; background:rgba(19,9,13,.78); }
  .tokyo-admin-disclosure summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 14px; color:var(--tokyo-white); cursor:pointer; list-style:none; overflow-wrap:anywhere; }
  .tokyo-admin-disclosure summary::-webkit-details-marker { display:none; }
  .tokyo-admin-disclosure summary::after { content:"+"; flex:none; color:var(--tokyo-gold); font-size:20px; }
  .tokyo-admin-disclosure[open] summary::after { content:"−"; }
  .tokyo-admin-disclosure[open] summary { border-bottom:1px solid var(--tokyo-line); }
  .tokyo-admin .nav-sub .tokyo-admin-disclosure > ul { display:block; margin:0; padding:6px; }
  .tokyo-admin .nav-sub .tokyo-admin-disclosure > ul > li { display:block; width:100%; margin:0; }

  .tokyo .content-card h1,.tokyo .content-card h2 { font-size:27px; }
  .tokyo input[type=text],.tokyo input[type=password],.tokyo input[type=email],.tokyo textarea,.tokyo select { font-size:16px; }
  .tokyo #acp-panel { flex-direction:column; }
  .tokyo #acp-panel .panelnav { width:100%; }
  .tokyo #acp-panel .panel { border-left:0; border-top:1px solid #756836; }
  .tokyo #panelmenu { display:flex; flex-wrap:wrap; }
  .tokyo .bio_main_image { float:none; margin:0 auto 22px; }
  .tokyo footer { margin:0 22px; justify-content:flex-start; padding:18px 0; }
  .tokyo-login .card { padding:26px 22px; }
}
/* Restore Login's full viewport backdrop after narrow header overrides. */
.tokyo-login header .background,.tokyo-login header .gradient { top:0; width:100%; height:100%; clip-path:none; }
@media(prefers-reduced-motion:reduce) { .tokyo * { transition:none!important; scroll-behavior:auto!important; } }
@media print {
  .tokyo .tokyo-site::after { display:none; }
  body.tokyo { background:white; color:black; }
  .tokyo .tokyo-site { width:100%; margin:0; border:0; box-shadow:none; }
  .tokyo header,.tokyo footer,.tokyo .nav-sub,.tokyo .panel-wrapper,.tokyo-subnav-fallback { display:none!important; }
  .tokyo main .body { display:block; }
  .tokyo main .content-card { padding:0; color:black; }
  .tokyo h1,.tokyo h2,.tokyo h3,.tokyo h4,.tokyo a { color:black; }
}

/* Portrait personnel layout; desktop presentation remains unchanged. */
@media(max-width:760px) {
 .tokyo .content-card:has(#manifest), .tokyo .content-card:has(.gallery):has(#tabs) { padding-left:16px; padding-right:16px; }
 .tokyo #manifest table { width:100%; min-width:0; max-width:100%; }
 .tokyo #manifest .tokyo-manifest-scroll { overflow:visible; }
 .tokyo #manifest :is(.tokyo-manifest-table,table:has(tr.active),table:has(img.charimg)) { display:block; width:100%; min-width:0; border-spacing:0; }
 .tokyo #manifest :is(.tokyo-manifest-table,table:has(tr.active),table:has(img.charimg)) > tbody { display:block; }
 .tokyo #manifest :is(.tokyo-manifest-table,table:has(tr.active),table:has(img.charimg)) > tbody > tr { display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px 12px; padding:16px 0; border-bottom:1px solid var(--tokyo-line); text-align:left; }
 .tokyo #manifest :is(.tokyo-manifest-table,table:has(tr.active),table:has(img.charimg)) td { display:block; width:auto; min-width:0; padding:0; text-align:left; overflow-wrap:anywhere; }
 .tokyo #manifest :is(.tokyo-manifest-table,table:has(tr.active),table:has(img.charimg)) td:empty { display:none; }
 .tokyo #manifest td.col_150 { grid-column:2; grid-row:1; align-self:start; }
 .tokyo #manifest td.col_150 img { width:120px; max-width:100%; height:auto; }
 .tokyo #manifest td:has(img.charimg) { grid-column:1; grid-row:1 / span 4; width:64px; min-width:0; }
 .tokyo #manifest img.charimg { width:64px; height:64px; min-width:0; max-width:64px; }
 .tokyo #manifest td:has(strong), .tokyo #manifest td.col_75 { grid-column:2; }
 .tokyo #manifest td[colspan="6"] { grid-column:1 / -1; }
 .tokyo #manifest td[colspan="6"] h3 { margin:12px 0 0; }
 .tokyo #manifest td strong.fontMedium { font-size:16px; line-height:1.4; }
 .tokyo #manifest table:not(.tokyo-manifest-table):not(:has(tr.active)):not(:has(img.charimg)) tr { display:flex; flex-wrap:wrap; gap:8px; }
 .tokyo #manifest table:not(.tokyo-manifest-table):not(:has(tr.active)):not(:has(img.charimg)) td { display:block; flex:1 1 100%; text-align:left; }
 .tokyo .content-card:has(.gallery):has(#tabs) .row { display:flex; flex-direction:column; gap:20px; margin:0; }
 .tokyo .content-card:has(.gallery):has(#tabs) .row > * { width:100%; max-width:100%; min-width:0; margin-left:0; float:none; }
 .tokyo .content-card:has(.gallery):has(#tabs) .gallery { margin:0 0 16px; text-align:center; }
 .tokyo .content-card:has(.gallery):has(#tabs) .gallery img { max-width:100%; width:auto; max-height:240px; height:auto; object-fit:contain; }
 .tokyo .content-card:has(.gallery):has(#tabs) .span4 > ul:not(.gallery) { margin:8px 0 16px; padding:0; list-style:none; }
 .tokyo .content-card:has(.gallery):has(#tabs) .span4 > ul:not(.gallery) a { display:inline-block; padding:6px 0; }
 .tokyo #tabs .ui-tabs-nav { display:flex; flex-wrap:wrap; gap:4px; padding:6px; }
 .tokyo #tabs .ui-tabs-nav li { float:none; margin:0; flex:1 1 auto; }
 .tokyo #tabs .ui-tabs-nav li a { display:block; padding:10px 8px; font-size:14px; text-align:center; white-space:normal; }
 .tokyo #tabs .ui-tabs-panel { padding:16px 12px; }
 .tokyo #tabs .tokyo-table-scroll { overflow:visible; }
 .tokyo #tabs table:has(.cell-label), .tokyo #tabs table:has(.cell-label) > tbody { display:block; width:100%; min-width:0; }
 .tokyo #tabs table:has(.cell-label) tr { display:block; padding:10px 0 14px; }
 .tokyo #tabs table:has(.cell-label) td { display:block; width:100%; min-width:0; padding:0; text-align:left; overflow-wrap:anywhere; }
 .tokyo #tabs table:has(.cell-label) td.cell-label { font-weight:650; margin-bottom:8px; }
 .tokyo #tabs table:has(.cell-label) td.cell-spacer { display:none; }
 .tokyo .character-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:760px) {
 /* NOVA controls row visibility; layout must never override its hidden class. */
 .tokyo #manifest :is(.tokyo-manifest-table,table:has(tr.active),table:has(img.charimg)) > tbody > tr.hidden { display:none; }
 .tokyo #manifest tr[hidden] { display:none!important; }
 .tokyo #manifest tr[style*="display: table-row"], .tokyo #manifest tr[style*="display: block"], .tokyo #manifest tr[style*="display: grid"] { display:grid!important; }
 .tokyo #manifest .tokyo-manifest-table td:not(:has(img.charimg)):not([colspan="6"]) { grid-column:2; }
 .tokyo #manifest .tokyo-manifest-table tr.open td.col_150 { grid-column:1 / -1; }
}